# react-ext-state

> A simple package for using external states

Latest version **1.0.6** (published 2023-07-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ext-state
pnpm add react-ext-state
yarn add react-ext-state
bun add react-ext-state
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2023-07-17 |
| First published | 2023-06-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 32.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Sergey Serov |
| Maintainers | sergomorello |
| Keywords | js, ts, react, state, ext state |

## Links

- npm: https://www.npmjs.com/package/react-ext-state
- Repository: https://github.com/SergoMorello/react.ext.state
- Homepage: https://github.com/SergoMorello/react.ext.state#readme
- Issues: https://github.com/SergoMorello/react.ext.state/issues
- npm.io page: https://npm.io/package/react-ext-state

## Dependencies (1)

- [easy-event-emitter](https://npm.io/package/easy-event-emitter.md) ^1.0.6

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.0.6 (latest) — 2023-07-17
- 1.0.5 — 2023-06-23
- 1.0.4 — 2023-06-23
- 1.0.3 — 2023-06-02
- 1.0.2 — 2023-06-02
- 1.0.1 — 2023-06-01
- 1.0.0 — 2023-06-01

## README

# React ext state

## A simple package for using external states

![Example](https://github.com/SergoMorello/react.ext.state/blob/dev/doc/chrome-capture-2023-5-1.gif?raw=true)

### Install
```
npm i react-ext-state
```

### Examples:

#### useState
```js
// 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
```js
// 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
```js
// 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;
```

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