Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aiji42/use-cors-state
Custom hooks for synchronizing state between different components, different windows, and cross-domains.
https://github.com/aiji42/use-cors-state
Last synced: 24 days ago
JSON representation
Custom hooks for synchronizing state between different components, different windows, and cross-domains.
- Host: GitHub
- URL: https://github.com/aiji42/use-cors-state
- Owner: aiji42
- License: mit
- Created: 2020-07-31T18:28:40.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T12:58:14.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T16:55:57.480Z (6 months ago)
- Language: TypeScript
- Homepage:
- Size: 3.02 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 36
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-cors-state
> Custom hooks for synchronizing state between different components, different windows, and cross-domains.
[](https://www.npmjs.com/package/use-cors-state) [](https://standardjs.com) [](https://travis-ci.org/aiji42/use-cors-state) [](http://www.typescriptlang.org/)
## Install
```bash
# when use npm
npm install --save use-cors-state
# when use yarn
yarn add use-cors-state
```
## DEMO
https://aiji42.github.io/use-cors-state/
## Usage
### Example for synchronizing state between different windows (e.g. iframe)
```jsx
// a componet in parent window
import React from 'react'
import { useCorsState } from 'use-cors-state'
const ExampleComponentParentWindow = ({ targetIframe }) => {
const [state, setState] = useCorsState('example', { window: targetIframe.contentWindow }, '')
return (
setState(e.target.value)} />
)
}
```
```jsx
// a componet in child window
import React from 'react'
import { useCorsState } from 'use-cors-state'
const ExampleComponentChildWindow = () => {
const [state, setState] = useCorsState('example', { window: window.parent }, '')
return (
inputted in parent: {state}
)
}
```
When setState is executed, the state is synchronized between both windows.
Synchronization is possible from both sides, not only from parent to child, but also from child to parent.
## API
```js
const [state, setState] = useCorsState(synchronizingKey, options, initialValue)
```
- __synchronizingKey:__ `string`
- Set the same key between components.
- __options:__ `OptionsType | undefined`
- __window__: optional (Default value is self window)
- The window in which the opponent's component exists.
- __domain__: optional
- This value can be used to restrict the domain.
- See "OptionsType" below for more information.
- __initialValue:__ `any`
- Initial value of the state.
#### OptionsType
```ts
// Server
// Loosely based on: https://github.com/krakenjs/post-robot/blob/master/src/public/server.js
type OptionsType = {
handler?: (err: any) => void,
errorHandler?: ({ source: Window, origin: string, data: Object }) => (void | any | ZalgoPromise),
window?: Window,
name?: string,
domain?: (string | RegExp | Array),
once?: boolean,
errorOnClose?: boolean
};
```
### Example
```js
// synchronize to window of a iframe
useCorsState('exampleKey', { window: iframe.contentWindow }, { userId: 1002 })
// specific the domain of the parent window.
useCorsState('exampleKey', { window: window.parent, domain: 'http://example.com' }, { userId: 1002 })
```
## License
MIT © [aiji42](https://github.com/aiji42)
---
This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).