babel-plugin-jsx-merge-props v0.0.2

babel-plugin-jsx-merge-props

Why?

It's annoying to use props that provided from multiple hooks.

const useFirstHook = () => {
  ...

  return {
    className,
    style,
    onClick,
  };
};

const useSecondHook = () => {
  ...

  return {
    value,
    style,
    onClick,
  };
};

const MyComponent = () => {
  const first = useFirstHook(...);
  const second = useSecondHook(...);

  const handleClick = useCallback(event => {
    first.onClick(event);
    second.onClick(event);
  }, [first, second]);

  return (
    <input
      type="text"
      {...first}
      {...second}
      className={[first.className, second.className].join(' ')}
      style={{ ...first.style, ...second.style }}
      onClick={handleClick}
    />
  );
}

Or would be better to use some package like merge-props, but It's still little bit bothersome.

import mergeProps from 'merge-props';

const MyComponent = () => {
  const first = useFirstHook(...);
  const second = useSecondHook(...);

  return (
    <input
      type="text"
      {...mergeProps(first, second)}
    />
  );
}

You can just write like below with this plugin.

import mergeProps from 'merge-props';

const MyComponent = () => {
  const first = useFirstHook(...);
  const second = useSecondHook(...);

  return (
    <input merge={mergeProps}
      type="text"
      {...first}
      {...second}
    />
  );
}

Installation

npm install --save-dev babel-plugin-jsx-merge-props

Usage

.babelrc:

{
  "plugins": [ "babel-plugin-jsx-merge-props" ]
}