https://github.com/nighttrax/react-bind-component

Function.prototype.bind for React components
https://github.com/nighttrax/react-bind-component

functional-programming react typescript

Last synced: about 1 month ago
JSON representation

Function.prototype.bind for React components

• Host: GitHub
• URL: https://github.com/nighttrax/react-bind-component
• Owner: NiGhTTraX
• Created: 2019-01-03T20:59:41.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T22:59:58.000Z (almost 2 years ago)
• Last Synced: 2024-10-06T11:33:16.004Z (about 1 month ago)
• Topics: functional-programming, react, typescript
• Language: TypeScript
• Homepage:
• Size: 1.54 MB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
> Type safe `Function.prototype.bind` for React components

![Build Status](https://github.com/NiGhTTraX/react-bind-component/workflows/Tests/badge.svg) [![codecov](https://codecov.io/gh/NiGhTTraX/react-bind-component/branch/master/graph/badge.svg)](https://codecov.io/gh/NiGhTTraX/react-bind-component) ![npm type definitions](https://img.shields.io/npm/types/react-bind-component.svg)

----

## Usage

```tsx

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();

```

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](https://reactjs.org/docs/render-props.html)

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:

```tsx

import bindComponent from 'react-bind-component';

interface ListProps {

  items: string[];

  renderItem: (item: string) => ReactElement;

}

const List = (props: ListProps) => 


  {props.items.map(item => 


    {props.renderItem(item)}

  

;


const ListWithTextLabels = bindComponent(List, {

  renderItem: x => {x}

});

const ListWithIcons = bindComponent(List, {

  renderItem: x => 

});

```