https://github.com/reactions/component

Declarative version of React.Component
https://github.com/reactions/component

Last synced: about 1 month ago
JSON representation

Declarative version of React.Component

• Host: GitHub
• URL: https://github.com/reactions/component
• Owner: reactions
• License: mit
• Created: 2018-02-17T02:03:57.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-06T19:46:38.000Z (about 2 years ago)
• Last Synced: 2024-04-15T12:47:44.392Z (8 months ago)
• Language: HTML
• Homepage: https://ui.reach.tech/component-component
• Size: 368 KB
• Stars: 1,061
• Watchers: 14
• Forks: 37
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome - component - Declarative version of React.Component (HTML)

README

        
# Reactions Component

This has moved to [Reach UI](https://ui.reach.tech/component-component), but this repo is here for the sake of history I guess.

## What?

Declarative version of React.Component.

## Why?

Because sometimes you want a lifecycle or some state but don't want to create a new component. Also, this stuff is composable as heck.

## Installation

```bash

npm install @reactions/component

# or

yarn add @reactions/component

```

And then import it:

```js

// using es modules

import Component from "@reactions/component";

// common.js

const Component = require("@reactions/component");

// AMD

// I've forgotten but it should work.

```

Or use script tags and globals.

```html

```

And then grab it off the global like so:

```js

const Component = ReactionsComponent;

```

## How?

Let's say you want some async data but don't want to make a whole new component just for the lifecycles to get it:

```render-babel

// import Component from '@reactions/component'

const Component = ReactComponentComponent;

ReactDOM.render(

  


    
Let's get some gists!

     {

        fetch("https://api.github.com/gists")

          .then(res => res.json())

          .then(gists => setState({ gists }));

      }}

    >

      {({ state }) =>

        state.gists ? (

          


            {state.gists.map(gist => (

              
{gist.description}

            ))}

          

        ) : (

          
Loading...

        )

      }

    

  
,

  DOM_NODE

);

```


Or maybe you need a little bit of state but an entire component

seems a bit heavy:

```render-babel

// import Component from '@reactions/component'

const Component = ReactComponentComponent;

ReactDOM.render(

  

    {({ setState, state }) => (

      


        
Every app needs a counter!

        

            setState(state => ({ count: state.count - 1 }))

          }

        >

          -

        

         {state.count} 

        

            setState(state => ({ count: state.count + 1 }))

          }

        >

          +

        

      

    )}

  ,

  DOM_NODE

);

```


## Props

You know all of these already:

* `didMount({ state, setState, props, forceUpdate })`

* `shouldUpdate({ state, props, nextProps, nextState })`

* `didUpdate({ state, setState, props, forceUpdate, prevProps, prevState })`

* `willUnmount({ state, props })`

* `children({ state, setState, props, forceUpdate })`

* `render({ state, setState, props, forceUpdate })`

## Legal

Released under MIT license.

Copyright © 2017-present Ryan Florence