├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── example
├── .gitignore
├── README.md
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ └── manifest.json
├── src
│ ├── App.js
│ ├── index.css
│ └── index.js
└── yarn.lock
├── package-lock.json
├── package.json
├── src
└── index.ts
└── tsconfig.json
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .cache
4 | lib
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 9
4 | - 8
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (c) 2019-present Muslim Guseinov
2 |
3 | Permission is hereby granted, free of charge, to any person obtaining a copy
4 | of this software and associated documentation files (the "Software"), to deal
5 | in the Software without restriction, including without limitation the rights
6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
7 | copies of the Software, and to permit persons to whom the Software is
8 | furnished to do so, subject to the following conditions:
9 |
10 | The above copyright notice and this permission notice shall be included in all
11 | copies or substantial portions of the Software.
12 |
13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
19 | SOFTWARE.
20 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # React Shared State Hook 🔗
2 |
3 | React hook for state synchronization between (windows, tabs).
4 |
5 | This hook is based on a [broadcast-channel](https://github.com/pubkey/broadcast-channel) library that works in New Browsers, Old Browsers, WebWorkers and NodeJs.
6 |
7 | ## Installation
8 |
9 | ```bash
10 | $ npm install use-share-state
11 | ```
12 | ## Usage
13 |
14 | ```js
15 | import useShareState from "use-share-state";
16 |
17 | const App = () => {
18 | const [state, setState] = useShareState(0);
19 |
20 | const increment = useCallback(() => {
21 | setState(state + 1);
22 | }, [state]);
23 |
24 | const decrement = useCallback(() => {
25 | setState(state - 1);
26 | }, [state]);
27 |
28 | return (
29 |
30 | Counter: {state}
31 | +
32 | -
33 |
34 | );
35 | }
36 | ```
37 |
38 | ## License
39 |
40 | MIT © [Muslim Guseinov](https://github.com/gus3inov)
--------------------------------------------------------------------------------
/example/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 |
8 | # testing
9 | /coverage
10 |
11 | # production
12 | /build
13 |
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 |
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 |
--------------------------------------------------------------------------------
/example/README.md:
--------------------------------------------------------------------------------
1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
2 |
3 | ## Available Scripts
4 |
5 | In the project directory, you can run:
6 |
7 | ### `npm start`
8 |
9 | Runs the app in the development mode.React App
13 |
14 |
15 | You need to enable JavaScript to run this app.
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/example/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": ".",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/example/src/App.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback } from 'react';
2 | import useShareState from 'use-share-state';
3 |
4 | const App = () => {
5 | const [state, setState] = useShareState(0);
6 |
7 | const increment = useCallback(() => {
8 | setState(state + 1);
9 | }, [state]);
10 |
11 | const decrement = useCallback(() => {
12 | setState(state - 1);
13 | }, [state]);
14 |
15 | return (
16 |
17 | Counter: {state}
18 | +
19 | -
20 |
21 | );
22 | }
23 |
24 | export default App;
25 |
--------------------------------------------------------------------------------
/example/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | padding: 0;
4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
6 | sans-serif;
7 | -webkit-font-smoothing: antialiased;
8 | -moz-osx-font-smoothing: grayscale;
9 | }
10 |
11 | code {
12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
13 | monospace;
14 | }
15 |
--------------------------------------------------------------------------------
/example/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom';
3 | import './index.css';
4 | import App from './App';
5 |
6 | ReactDOM.render(",
7 | "license": "MIT",
8 | "homepage": "https://github.com/gus3inov/use-share-state",
9 | "repository": {
10 | "type": "git",
11 | "url": "https://github.com/gus3inov/use-share-state.git"
12 | },
13 | "bugs": {
14 | "url": "https://github.com/gus3inov/use-share-state/issues"
15 | },
16 | "keywords": [
17 | "react",
18 | "hook",
19 | "hooks",
20 | "broadcast-channel",
21 | "tab",
22 | "sync-tab",
23 | "share",
24 | "shared-state"
25 | ],
26 | "files": [
27 | "lib",
28 | "LICENSE",
29 | "README.md"
30 | ],
31 | "scripts": {
32 | "prepublishOnly": "npm run build",
33 | "test": "cross-env CI=1 react-scripts test --env=jsdom",
34 | "test:watch": "react-scripts test --env=jsdom",
35 | "build": "tsc"
36 | },
37 | "peerDependencies": {
38 | "react": "^16.8.4",
39 | "react-dom": "^16.8.4"
40 | },
41 | "devDependencies": {
42 | "@babel/core": "^7.3.4",
43 | "@babel/runtime": "^7.3.4",
44 | "@types/jest": "^24.0.11",
45 | "@types/react": "^16.8.7",
46 | "@types/react-dom": "^16.8.2",
47 | "ava": "^1.3.1",
48 | "browser-env": "^3.2.6",
49 | "raf": "^3.4.1",
50 | "react": "^16.8.4",
51 | "react-dom": "^16.8.4",
52 | "react-test-renderer": "^16.8.4",
53 | "typescript": "^3.3.3333"
54 | },
55 | "dependencies": {
56 | "broadcast-channel": "^2.1.9"
57 | }
58 | }
59 |
--------------------------------------------------------------------------------
/src/index.ts:
--------------------------------------------------------------------------------
1 | import { useState, useEffect } from 'react';
2 | import BroadcastChannel, { BroadcastChannelOptions } from 'broadcast-channel';
3 |
4 | type Config = {
5 | channel: string;
6 | broadcastChannelOptions: BroadcastChannelOptions | undefined;
7 | }
8 |
9 | const defaultConfig = {
10 | channel: 'shared_state',
11 | broadcastChannelOptions: undefined,
12 | };
13 |
14 | const useShareState = (initialState: State, config: Config = defaultConfig): [State, Function] => {
15 | const channel: BroadcastChannel = new BroadcastChannel(config.channel, config.broadcastChannelOptions);
16 | const [state, setState] = useState(initialState);
17 |
18 | const postMessage = (message: State) => {
19 | channel.postMessage(message);
20 | setState(message);
21 | }
22 |
23 | useEffect(() => {
24 | channel.onmessage = (message: State) => setState(message);
25 |
26 | return () => {
27 | channel.close();
28 | }
29 | }, []);
30 |
31 | return [state, postMessage];
32 | }
33 |
34 | export default useShareState;
35 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "outDir": "lib",
4 | "module": "commonjs",
5 | "target": "es5",
6 | "lib": ["es6", "dom", "es2016", "es2017"],
7 | "sourceMap": true,
8 | "allowJs": false,
9 | "jsx": "react",
10 | "declaration": true,
11 | "moduleResolution": "node",
12 | "forceConsistentCasingInFileNames": true,
13 | "noImplicitReturns": true,
14 | "noImplicitThis": true,
15 | "noImplicitAny": true,
16 | "strictNullChecks": true,
17 | "suppressImplicitAnyIndexErrors": true,
18 | "noUnusedLocals": true,
19 | "noUnusedParameters": true,
20 | "allowSyntheticDefaultImports": true
21 | },
22 | "include": ["src"],
23 | "exclude": ["node_modules", "build", "dist", "example", "rollup.config.js"]
24 | }
--------------------------------------------------------------------------------