react-hook-hooked

react-hook-hooked

A nifty little HOC to add hooks to your React components.

Installation

We recommend installing using yarn:

$ yarn add react-hook-hooked

Or, if you prefer npm:

$ npm -S react-hook-hooked

Usage

hooked is a high order component that receives as arguments the hook to be attached to the component and an optional function to extract the hook's arguments from the component's props.

A simple hook that receives no arguments

const myHook = () => ({
  handleButtonPress: onCallback(() => {
    // do something
    console.log(title);
  }, [title]),
});
 
const MyComponent = ({ title, handleButtonPress }) => (
  <button onClick={handleButtonPress}>{title}</button>
);
 
export default hooked(myHook)(MyComponent);

If you have a hook that receives arguments

const myHook = (title) => ({
  title,
  handleButtonPress: onCallback(() => {
    // do something
    console.log(title);
  }, [title]),
});
 
const MyComponent = ({ title, handleButtonPress }) => (
  <button onClick={handleButtonPress}>{title}</button>
);
 
export default hooked(myHook, ({ name }) => name)(MyComponent);

When you use MyComponent and set its props, the function passed as the second argument to hooked will extract the hook's args from the component's props:

<MyComponent title='foobar' />

Caveat

If you're using Typescript ❤️ in your project, your component will have to receive a union of the component's props and the hook's return type:

type Props = { title: string };
 
// This is an union with Props, since it returns the received `title` as an attribute
type Hooked = Props & { handleButtonPress: () => void };
 
const myHook = (title: string): Hooked => ({
  title,
  handleButtonPress: onCallback(() => {
    // do something
    console.log(title);
  }, [title]),
});
 
const MyComponent = ({ title, handleButtonPress }: Hooked) => (
  <button onClick={handleButtonPress}>{title}</button>
);
 
export default hooked<Props, Hooked>(myHook, ({ name }: Props) => name)(MyComponent);

This way, externally your MyComponent will expect only title as its props. By default, hooked's extractor is a passthru function that sends the received props to the hook.