# react-bind-component

> Type safe Function.prototype.bind for React components

Latest version **1.0.4** (published 2019-02-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-bind-component
pnpm add react-bind-component
yarn add react-bind-component
bun add react-bind-component
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2019-02-06 |
| First published | 2019-01-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 7.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Andrei Picus |
| Maintainers | nighttrax |
| Keywords | react, bind, typescript, functional-programming |

## Links

- npm: https://www.npmjs.com/package/react-bind-component
- Repository: https://github.com/NiGhTTraX/react-bind-component
- Homepage: https://github.com/NiGhTTraX/react-bind-component#readme
- Issues: https://github.com/NiGhTTraX/react-bind-component/issues
- npm.io page: https://npm.io/package/react-bind-component

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2019-02-06
- 1.0.3 — 2019-02-06
- 1.0.2 — 2019-02-06
- 1.0.1 — 2019-01-03
- 1.0.0 — 2019-01-03

## README

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

[![Build Status](https://travis-ci.com/NiGhTTraX/react-bind-component.svg?branch=master)](https://travis-ci.com/NiGhTTraX/react-bind-component)
[![codecov](https://codecov.io/gh/NiGhTTraX/react-bind-component/branch/master/graph/badge.svg)](https://codecov.io/gh/NiGhTTraX/react-bind-component)

----


## 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(<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](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) => <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`} />
});
```

---
_Source: https://npm.io/package/react-bind-component · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._