Dev Practises - spread props

[origami-z]

Always spread props passed-in to root element. Destructure props passed in and name the remaining rest, which should be positioned at last after all other props to the root element. This makes sure consumers always having control of props, despite us imposing some default behaviour.

export const Component = forwardRef(
  function Component({className, ...rest}, ref) {
      return (
          <div className={clsx(withBaseName(), className)} ref={ref} {...rest}>...</div>
      )
  }
)

Worth noting that positioning of ref doesn't matter, as React doesn't allow that to be in props.

Don't forget any other props a consumer may need to provide override, if we provide any default values, e.g. style.

export const Component = forwardRef(
  function Component({style, ...rest}, ref) {
      return (
          <div style={{ width: defaultWidth, ...style}} ref={ref} {...rest}>...</div>
      )
  }
)

## Open discussions

• is rest a bad variable naming? v.s. restProps