Declarative version of React.Component
Switch branches/tags
Nothing to show
Clone or download
Latest commit e94b5ca Nov 5, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Change to @reactions scope Mar 5, 2018
src Change to @reactions scope Mar 5, 2018
templates first Feb 17, 2018
.gitignore nvm Mar 3, 2018
.travis.yml first Feb 17, 2018
LICENSE first Feb 17, 2018
README.md Update README.md Nov 5, 2018
index.html Switch to rollup Mar 3, 2018
package.json 2.0.2 Mar 5, 2018
rollup.config.js Change to @reactions scope Mar 5, 2018
yarn.lock Cleaned up vestigial nwb dependencies Mar 5, 2018

README.md

Reactions Component

This has moved to Reach UI, 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

npm install @reactions/component
# or
yarn add @reactions/component

And then import it:

// 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.

<script src="https://unpkg.com/@reactions/component"></script>

And then grab it off the global like so:

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:

// import Component from '@reactions/component'
const Component = ReactComponentComponent;

ReactDOM.render(
  <div>
    <h2>Let's get some gists!</h2>
    <Component
      initialState={{ gists: null }}
      didMount={({ setState }) => {
        fetch("https://api.github.com/gists")
          .then(res => res.json())
          .then(gists => setState({ gists }));
      }}
    >
      {({ state }) =>
        state.gists ? (
          <ul>
            {state.gists.map(gist => (
              <li key={gist.id}>{gist.description}</li>
            ))}
          </ul>
        ) : (
          <div>Loading...</div>
        )
      }
    </Component>
  </div>,
  DOM_NODE
);

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

// import Component from '@reactions/component'
const Component = ReactComponentComponent;

ReactDOM.render(
  <Component initialState={{ count: 0 }}>
    {({ setState, state }) => (
      <div>
        <h2>Every app needs a counter!</h2>
        <button
          onClick={() =>
            setState(state => ({ count: state.count - 1 }))
          }
        >
          -
        </button>
        <span> {state.count} </span>
        <button
          onClick={() =>
            setState(state => ({ count: state.count + 1 }))
          }
        >
          +
        </button>
      </div>
    )}
  </Component>,
  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