# @almin/react-context

> React Context wrapper for almin.

Latest version **1.1.4** (published 2020-07-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install @almin/react-context
pnpm add @almin/react-context
yarn add @almin/react-context
bun add @almin/react-context
```

## 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.1.4 |
| Published | 2020-07-12 |
| First published | 2018-06-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 34.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 505 |
| Author | azu |
| Maintainers | azu |
| Keywords | almin, context, react |

## Links

- npm: https://www.npmjs.com/package/@almin/react-context
- Repository: https://github.com/almin/almin
- Homepage: https://github.com/almin/almin/tree/master/packages/@almin/react-context/
- Issues: https://github.com/almin/almin/issues
- npm.io page: https://npm.io/package/@almin/react-context

## 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.1.4 (latest) — 2020-07-12
- 1.1.3 — 2018-08-30
- 1.1.2 — 2018-08-26
- 1.1.1 — 2018-06-09
- 1.1.0 — 2018-06-09

## README

# @almin/react-context

React Context wrapper for almin.

## Install

Install with [npm](https://www.npmjs.com/):

    npm install @almin/react-context

Requirements:

- React 16.3 >=

## Example

This is a example of `@almin/react-context`.

:memo: Note: [@almin/store-test-helper](../@almin/store-test-helper) is a test helper for creating almin's `Store`.

```ts
import { Context, StoreGroup } from "almin";
import { createStore } from "@almin/store-test-helper";
import { createReactContext } from "@almin/react-context";
// Create Almin context
const context = new Context({
    // StoreGroup has {a, b, c} state
    store: new StoreGroup({
        // createStore is a test helper that create Store instance of Almin
        // initial state of `a` is { value: "a" }
        a: createStore({ value: "a" }),
        b: createStore({ value: "b" }),
        c: createStore({ value: "c" }),
    })
});
// Create React Context that wrap Almin Context
const { Consumer, Provider } = createReactContext(context);
// Use Provider
class App extends React.Component {
    render() {
        return (
            // You should wrap Consumer with Provider
            <Provider>
                {/* Consumer children props is called when Almin's context is changed */}
                <Consumer>
                    {state => {
                        return <ul>
                            <li>{state.a.value}</li>;
                            <li>{state.b.value}</li>;
                            <li>{state.c.value}</li>;
                        </ul>
                    }}
                </Consumer>
            </Provider>
        );
    }
}
```

## Usage

## `createReactContext(AlminContext): { Provider, Consumer }`

`createReactContext` create thee React Components from Almin's `Context` instance.

```ts
import { Context, StoreGroup } from "almin";
import { createStore } from "@almin/store-test-helper";
import { createReactContext } from "@almin/react-context";
// Create Almin context
const context = new Context({
    store: createStore({
        value: "store-initial"
    })
});
// Create React Context from Almin Context
// It return these React Components
const { Provider, Consumer } = createReactContext(context);
```

### `<Provider>`

`<Provider>` component allows `<Consumers>` to subscribe to Almin's context changes.
It is a just wrapper of React Context's Provider.

- [React Context: Provider](https://reactjs.org/docs/context.html#provider)

```ts
class App extends React.Component {
    render() {
        return (
            // You should wrap Consumer with Provider
            <Provider>
                {/* Consumer should be under the Provider */}
                <Consumer>
                    {state => { /* state is result of context.getState() */ }}
                </Consumer>
                <Consumer>
                    {state => { /* state is result of context.getState() */ }}
                </Consumer>
            </Provider>
        );
    }
}
```

Also, you can pass `initialState` to `Provider`.
If you does not pass `initialState`, `Consumer`'s state is `context.getState()` value by default.

```tsx
import { Context, StoreGroup } from "almin";
import { createStore } from "@almin/store-test-helper";
import { createReactContext } from "@almin/react-context";
const context = new Context({
    store: createStore({
        value: "store-initial"
    })
});
const { Consumer, Provider } = createReactContext(context);

class App extends React.Component {
    render() {
        return (
            <Provider initialState={{ value: "props-initial" }}>
                <Consumer>
                    {state => {
                        // value is "props-initial"(not "store-initial")
                        return <p>{state.value}</p>;
                    }}
                </Consumer>
            </Provider>
        );
    }
}
```

### Consumer

`<Consumer>` component subscribes to Almin's context changes.
It is a just wrapper of React Context's Consumer.

- [React Context: Consumer](https://reactjs.org/docs/context.html#consumer)

`<Consumer>` requires a [function as a child](https://reactjs.org/docs/render-props.html#using-props-other-than-render). The function receives the current context value and returns a React node.

```tsx
class App extends React.Component {
    render() {
        return (
            // You should wrap Consumer with Provider
            <Provider>
                {/* Consumer require a function as a children */}
                <Consumer>
                    {state => {
                        /* render something based on the context value */
                        return <p>{state.value}</p>;
                    }}
                </Consumer>
            </Provider>
        );
    }
}
```

## Changelog

See [Releases page](https://github.com/almin/almin/releases).

## Running tests

Install devDependencies and Run `npm test`:

    npm i -d && npm test

## Contributing

Pull requests and stars are always welcome.

For bugs and feature requests, [please create an issue](https://github.com/almin/almin/issues).

1. Fork it!
2. Create your feature branch: `git checkout -b my-new-feature`
3. Commit your changes: `git commit -am 'Add some feature'`
4. Push to the branch: `git push origin my-new-feature`
5. Submit a pull request :D

## Author

- [github/azu](https://github.com/azu)
- [twitter/azu_re](https://twitter.com/azu_re)

## License

MIT © azu

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