0.1.3 • Published 5 years ago
zasz v0.1.3
A react store manager
Probably the simplest react store in the world.
Installation: npm i zasz
Client Side Rendering
index.js
In the main file you should wrap your app's main element with the zasz Provider.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { Provider } from 'zasz';
ReactDOM.render(<Provider><App /></Provider>, document.getElementById('root'));
App.js
Anywhere else in your app you can import the zasz store. Zasz will share data through the app. Once you change a value in store it will be applied everywhere.
import React from 'react';
import store from 'zasz';
store.counter = 0;
export default (props) =>
<div>
<div>Counter {store.counter}</div>
<div onClick={()=>{ store.counter+=1 }}>Plus one</div>
</div>
Server Side Rendering with Next.js
First off, you should follow the instructions: https://nextjs.org/docs#custom-app
Then change the _app.js
file:
import React from 'react';
import App from 'next/app';
import { Provider } from 'zasz';
class MyApp extends App {
static async getInitialProps({ Component, ctx }) {
let pageProps = {};
if (Component.getInitialProps) {
pageProps = await Component.getInitialProps(ctx);
}
return { pageProps };
}
render() {
const { Component, pageProps } = this.props;
return (
<Provider>
<Component {...pageProps} />
</Provider>
);
}
}
export default MyApp;
Note: zasz does not work with PureComponents
Happy hacking 😉