Skip to content
master
Switch branches/tags
Code

Latest commit

The received component should not have HookRet as part of its initial props. HookRet should only be added to the resulting component
d2f6b43

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 

react-hook-hooked Build Status codecov npm

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.