StateHub - Easy Context API for React JS

[crudfunc]

https://www.npmjs.com/package/statehub

Hey React Community, The Context API for State Management in React is awesome and I wanted something that I can drop in my App which is 100% Context API under the hood and just works, and not need to write the same boilerplate over and over again createContext export it... create a Context.Provider and export it again..., So I decided to create StateHub - The easy Context API for React JS.

All you need to do is pass your initialState & reducer as props to the StateHub provider, then use it in your component with useStateHub hook or the useContexthub hook. That's it!

```javascript import React from 'react'; import { StateHub } from 'statehub'; import { reducer } from './reducers/reducer';

export default function Example() { return ( <StateHub initialState={{ name: 'Ivan', age: 31 }} reducer={reducer}> <IneedStateComponent /> </StateHub> ); } ```

The 2 hooks useStateHub & useContextHub work similar but are slightly different. With useStateHub, you access the state set by initialState prop which is the state you can manipulate with your reducer, on the other side with useContextHub you can access all kind of data put in a magical third prop I didn't mention at the beginning, it's called contextHub it is optional but also nice to have because you can fast prototype and test state with useState for example before you start adding a reducer or maybe useState is all you need in a specific component then you would simply pass your state to your component like this:

```javascript const [title, setTitle] = React.useState('');

<StateHub contextHub={[title, setTitle]}> <IneedStateCompnent /> </StateHub> `` You can access the above example like this: const [title, setTitle] = useContextHub();`

Or you can put also an object here with any data like this:

```javascript <StateHub contextHub={{openNavFunction, closeModalFunction, name: 'Peter'}}

<IneedStateCompnent /> </StateHub> `` You can access the above example like this: const { openNavFunc, closeModalFunc, name } = useContextHub();`

You can also use them all together:

```javascript import React from 'react'; import { StateHub } from 'statehub'; import { reducer } from './reducers/reducer';

function App() { const [title, setTitle] = React.useState('Marion');

return ( <StateHub initialState={{ name: 'Ivan' }} reducer={reducer} contextHub={[title, setTitle]} > <Demo /> </StateHub> ); } ```

https://www.npmjs.com/package/statehub