https://github.com/diogofcunha/react-to-component

:rocket: Blazing fast and 🔑safe library to create components (componentify) imperative or functional apis
https://github.com/diogofcunha/react-to-component

component-builder component-library componentify components convert-to-component react to-component

Last synced: 11 days ago
JSON representation

:rocket: Blazing fast and 🔑safe library to create components (componentify) imperative or functional apis

• Host: GitHub
• URL: https://github.com/diogofcunha/react-to-component
• Owner: diogofcunha
• License: mit
• Created: 2018-10-07T14:34:44.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-10T21:35:21.000Z (about 6 years ago)
• Last Synced: 2024-04-23T10:34:58.493Z (7 months ago)
• Topics: component-builder, component-library, componentify, components, convert-to-component, react, to-component
• Language: TypeScript
• Homepage:
• Size: 79.1 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-blazingly-fast - react-to-component - :rocket: Blazing fast and 🔑safe library to create components (componentify) imperative or functional apis (TypeScript)

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

  {({ loading, error, data }) =>

    loading ? "Loading" : error ? "Oops, error" : JSON.stringify(data)

  }

```

## 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 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 |