#preact-statenano

is a small library that allows to synchronize state events created on the basis of StateNano with components created with preact all thanks to the high order components.

yarn

yarn add -D preact-statenano

npm

npm install -D preact-statenano

Provider Example

you can enter [codesandbox.io] (https://codesandbox.io/s/4xjvlqx870) to see an example of preact-statenano and [statenano] (https://github.com/UpperCod/statenano)

import { h, Component, render } from "preact";
import {Provider} from 'preact-statenano';
import App   from './components/App';
import Todo  from './states/Todo';

render(
   <Provider todo={new Todo({tasks:[]})}>
       <App/>
   <Provider/>
)

Connect example

connect allows to generate a component that has 2 static properties:

• with: allows you to assign a component to the new component generated by connect
• map: it allows to map the new state, it must return an object

import { h, Component, render } from "preact";
import {connect} from 'preact-statenano';

function Todo({state}){
   return <h1>Todo!</h1>
}

return connect('todo').with(Todo).map(({todo},props)=>todo)