react-bind-component
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.4 • Public • Published

    Type safe Function.prototype.bind for React components

    Build Status codecov


    Usage

    import bindComponent from 'react-bind-component';
     
    interface FooProps {
      foo: number;
      bar: number;
    }
     
    const Foo = (props: FooProps) => null;
     
    const BoundFoo = bindComponent(Foo, { bar: 2 });
     
    ReactDOM.render(<BoundFoo foo={1} />);

    Just like Function.prototype.bind, bindComponent creates a new component that renders the original one with the supplied props plus any other props that are passed when the new component is rendered.

    Examples

    Partially applying components

    Using the render props technique we can design components that delegate parts of their rendering logic to methods passed through props. We can then bind these components to various implementations of those render props:

    import bindComponent from 'react-bind-component';
     
    interface ListProps {
      items: string[];
      renderItem: (item: string) => ReactElement;
    }
     
    const List = (props: ListProps) => <ul>
      {props.items.map(item => <li>
        {props.renderItem(item)}
      </li>
    </ul>;
     
    const ListWithTextLabels = bindComponent(List, {
      renderItem: x => <span>{x}</span>
    });
     
    const ListWithIcons = bindComponent(List, {
      renderItem: x => <img src={`/imgs/${x}.png`} />
    });

    Install

    npm i react-bind-component

    DownloadsWeekly Downloads

    3

    Version

    1.0.4

    License

    MIT

    Unpacked Size

    7.76 kB

    Total Files

    8

    Last publish

    Collaborators

    • nighttrax