# react-to-component

> Blazing fast library to componentify imperative or functional apis

Latest version **1.0.2** (published 2018-10-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-to-component
pnpm add react-to-component
yarn add react-to-component
bun add react-to-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.2 |
| Published | 2018-10-10 |
| First published | 2018-10-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 42.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Diogo Cunha |
| Maintainers | diogofcunha |
| Keywords | react, componentify, convert-to-component, composition, async, promise, component, reactive |

## Links

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

## Dependencies (1)

- [fast-deep-equal](https://npm.io/package/fast-deep-equal.md) ^2.0.1

## 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.2 (latest) — 2018-10-10
- 1.0.1 — 2018-10-10
- 1.0.0 — 2018-10-07
- 0.0.0-get-name — 2018-10-06

## README

# react-to-component

[![Travis][build-badge]][build]
[![npm package][npm-badge]][npm]
[![Coveralls][coveralls-badge]][coveralls]
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[build-badge]: https://img.shields.io/travis/diogofcunha/react-to-component/master.png?style=flat-square
[build]: https://travis-ci.org/diogofcunha/react-to-component
[npm-badge]: https://img.shields.io/npm/v/react-to-component.png?style=flat-square
[npm]: https://www.npmjs.com/package/react-to-component
[coveralls-badge]: https://img.shields.io/coveralls/diogofcunha/react-to-component/master.png?style=flat-square
[coveralls]: https://coveralls.io/github/diogofcunha/react-to-component

:rocket: Blazing fast and tiny library that enables you to **create react components (componentify)** imperative or functional apis.

## Install

```shell
yarn add react-to-component
```

## Aims to be:

- :rocket: Blazing fast
- ➿Defensive code friendly
- :rage2: Async first
- 🔧 Memory leak safe
- :ring: Test friendly

## A quick example

```typescript
<ToComponent original={oldLegacyCodeApi} params={[1, 2, 3]}>
  {({ loading, error, data }) =>
    loading ? "Loading" : error ? "Oops, error" : JSON.stringify(data)
  }
</ToComponent>
```

## Live examples

- #### Async example
  [![Edit react-to-component async example](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/92l7qw7l5p)

## Configuration

| Prop                | Required | Default         | Type                                                                                                    | Description                                                                                                                              |
| ------------------- | -------- | --------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| original            | ✔️       | ✖️              | `(...params: P[]) => Promise<T> or T`                                                                   | The original function to be encapsulated                                                                                                 |
| params              | ✔️       | ✖️              | `P[]`                                                                                                   | The params that will be used in the function invocation                                                                                  |
| children            | ✔️       | ✖️              | `({ data: T or null, error: Error or null, loading: boolean }) => JSX.Element or JSX.Element[] or null` | The render prop that controls you data flow                                                                                              |
| parametersDidChange | ✖️       | Params equality | `(previousParams: P[], nextParams: P[]) => boolean`                                                     | Ability to supply a custom check for parameter equality, use this if for example you need to ignore some parameters for caching purposes |

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