react-ext-state

React ext state

A simple package for using external states

Install

npm i react-ext-state

Examples:

useState

// App.js
import "./App.css";

import Info from "./Info";
import Button from "./Button";

const App = () => {	
	return(<div className="app">
		<Info nameState="test"/>
		<Button title="Hello world!" nameState="test"/>
		<Button title="Easy ext state!" nameState="test"/>
	</div>)
};

export default App;

// Button.js
import Ext from "react-ext-state";

const Button = ({title, nameState}) => {
	const handle = () => {
		Ext.setState(nameState, title);
	};

	return(<button onClick={handle}>{title}</button>);
};

export default Button;


// Info.js
import Ext from "react-ext-state";

const Info = ({nameState}) => {
	const [info] = Ext.useState(nameState, 'Any inital value');
	return(<div className="info">{info}</div>);
};

export default Info;

useEvent

// Info.js
import React from "react";
import Ext from "react-ext-state";

const Info = ({nameState}) => {
	const [info, setInfo] = React.useState('Any inital value');
	Ext.useEvent(nameState, setInfo);
	return(<div className="info">{info}</div>);
};

export default Info;

Or

Isolated class style

// store.js
import Ext from "react-ext-state";

export default new class store extends Ext {
	state = {
		info: 'Any inital value'
	}

	set = (nameState, title) => {
		this.setState(nameState, title)
	}
}

// Button.js
import store from "./store.js";

const Button = ({title, nameState}) => {
	const handle = () => {
		store.set(nameState, title);
	};

	return(<button onClick={handle}>{title}</button>);
};

export default Button;

// Info.js
import store from "./store.js";

const Info = ({nameState}) => {
	const [info] = store.useState(nameState);
	return(<div className="info">{info}</div>);
};

export default Info;