open-index/open-npm huggingface dataset:
npm package: @reactions/component
Description: Declarative Version of React.Component
Author: Ryan Florence
Latest version: 2.0.2

# Reactions Component

## 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
<script src="https://unpkg.com/@reactions/component"></script>
```

And then grab it off the global like so:

```js
const Component = ReactComponentComponent;
```

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

```render-babel
// 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 &copy; 2017-present Ryan Florence
npm package: @reactions/fetch
Description: Declarative version of React.Component.
Author: Ryan Florence
Latest version: 0.0.0

# Reactions Fetch

Declarative Fetch component for React Suspense.

## 🚨 EXPERIMENTAL 🚨

Ayyyyyyyyyyyyyyyyyyyyyyyyyyyyyy

So this is totally experimental. The React API's this component uses are unstable and will change. We’re all still learning what they even mean! But that doesn't mean we can't play around with them and figure out how to make them even better. So come along, but beware!

## Installation

```bash
npm install @reactions/fetch
# or
yarn add @reactions/fetch
```

And then import it:

```js
// using es modules
import Component from "@reactions/fetch";

// common.js
const Component = require("@reactions/fetch");

// AMD
// I've forgotten but it should work.
```

Or use script tags and globals.

```html
<script src="https://unpkg.com/@reactions/fetch"></script>
```

And then grab it off the global like so:

```js
const Component = ReactionsFetch;
```

## How To

Reading and invalidating a path:

```jsx
<Fetch path="https://api.gitub.com/gists">
  {({ data, invalidate }) => (
    <div>
      <button onClick={invalidate}>Refresh</button>
      <ul>{data.map(gist => <li>{gist.description}</li>)}</ul>
    </div>
  )}
</Fetch>
```

Optimistically updating a path.

```jsx
<Fetch path="/projects">
  {({ data, set, invalidate }) => (
    <ul>
      {data.map(item => (
        <li>
          {item.title}{" "}
          <button
            onClick={async () => {
              set(items.filter(alleged => alleged.id !== item.id));
              const res = await fetch(`/todos/${item.id}`, {
                method: "delete"
              });
              if (!res.ok) {
                alert(`Failed to delete ${item.id}`);
                invalidate(); // refetches from source
              }
            }}
            aria-label="delete"
          >
            ⨉
          </button>
        </li>
      ))}
    </ul>
  )}
</Fetch>
```

Check out the [example](/example) for more. It's running <a href="https://reactions.github.io/fetch">here</a>.

## Legal

Released under MIT license.

Copyright &copy; 2018-present Ryan Florence