Pass all the rest props to Lock div about react-focus-lock HOT 3 CLOSED

What would you say about about passing all "extra" props as lockProps, and also component name as as:

<FocusLock className={...} lockProps={onTransitionEnd:{...}, onClick:{...}} as="section">

This makes things more typable (allowing only one prop with anything inside), and could not introduce any breaking changes to the existing customers - in your case "something" could just start working, while it wasnt.

Next - you can create a slim wrapper around Focus lock to expose it to your code with your interface

const {
      children,
      disabled,
      noFocusGuards,
      persistentFocus,
      autoFocus,
      allowTextSelection,
      group,
      whiteList,
      ...lockProps
} = this.props;
return <FocusLock ... lockProps={lockProps} />

Another option, is pass all "extra" props to as

<FocusLock ... as={<div className={...} onTransitionEnd={...} onClick={...}}/>

And I will cloneElement in the internals. Probably this is a bit easiers to use, but a bit uncommon.

Thoughts?

from react-focus-lock.

I don't think cloneElement is necessary here, seems like redundant work both in writing code and in runtime.
Not sure if separate prop object for actually rendered element is more typable, but it of course can solve the problem too!

from react-focus-lock.

v.1.14.0

from react-focus-lock.