# substate-connect

> Easily wire up substate with popular front-end libraries

Latest version **3.1.0** (published 2021-02-14) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install substate-connect
pnpm add substate-connect
yarn add substate-connect
bun add substate-connect
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2021-02-14 |
| First published | 2018-09-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 282.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Tom Saporito |
| Maintainers | tamb |
| Keywords | substate, react |

## Links

- npm: https://www.npmjs.com/package/substate-connect
- Repository: https://github.com/TomSaporito/substate-connect
- Homepage: https://github.com/TomSaporito/substate-connect#readme
- Issues: https://github.com/TomSaporito/substate-connect/issues
- npm.io page: https://npm.io/package/substate-connect

## Dependencies (1)

- [substate](https://npm.io/package/substate.md) ^8.1.1

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

- 3.1.0 (latest) — 2021-02-14
- 3.1.0-alpha.4 (next) — 2020-06-28
- 3.0.9 (stable) — 2019-03-08
- 3.1.0-alpha.3 — 2020-06-05
- 3.1.0-alpha.2 — 2020-06-05
- 3.1.0-alpha.1 — 2020-06-04
- 3.0.8 — 2019-03-07
- 3.0.7 — 2019-03-07
- 3.0.6 — 2019-02-15
- 3.0.5 — 2019-02-03
- 3.0.4 — 2019-02-03
- 3.0.3 — 2019-02-03
- 3.0.2 — 2019-02-03
- 3.0.1 — 2019-02-03
- 3.0.0 — 2018-09-07
- … 4 more at https://npm.io/package/substate-connect/versions

## README

# substate-connect
Higher Order Functions to use substate with React (soon Preact and Inferno)

[Demo repo](https://github.com/tamb/substate-demo)

## Example usage
### mapping state to props in component
```js
import {connect} from 'substate-connect';
import substateInstance from './mystate.js';
/**
    MyComponent
*/

export default connect(substateinstance, {
    prop1: 'path.to.prop',
    prop2: 'name',
    prop3: 'location' 
    })(MyComponent);
```

```js

### wrapping App in store instance
// App.js
import { Provide } from 'substate-connect';
import substateIntsance from './mystate.js';

/*

function App....

*/
const WiredApp = Provide(substateInstance, ["STATE_UPDATED"], onMount)(App);

export default WiredApp;
```

## What the H does this do?
Similar to react-redux `connect` method.

You pass in a reference to the substate instance, so we can wire up the props, and you pass in an object mapping the prop names for the component (the keys), to the prop values you want (the path -- as a string -- to the chunk of state you need).  Then it returns a function which needs your component as an argument.  

The `Provide` HOC needs the substate instance as a first argument.  The second argument is an array of `substate` `$type`s you want the App to `setState` too.  It's recommended to at least have `"STATE_UPDATED"` passed in the array.

`onMount` is a function that will fire when the Provide higher order component mounts.
The signature:
`onMount(store, triggers)`
So you have access to the store and triggers passed in. Note: `this` is bound to the HOC.

Now it's all wired up.

## Why map the props?
Mapping props allows your component to have its own prop structure and not care what the global state structure is like. This allows for component reusability. 

## What about props through composition?
Pass those in as you normally would.  They will be alongside the props from the `connect` method.  This way you can pass functions into the component during normal composition.

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