diff --git a/README.md b/README.md index 49c1625..70077a6 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,16 @@ -# storeon-cross-tab - Storeon logo by Anton Lovchikov + +# storeon-cross-tab -The 189 bytes module for [Storeon](https://github.com/storeon/storeon) to sync state at different tabs of the browser. It syncs state on every change. It uses [Size Limit](https://github.com/ai/size-limit) to control the size. +Module for [Storeon] to synchronize actions for browser tabs with filtering of events that need to be synchronized. It size is 205 bytes (minified and gzipped) and uses [Size Limit] to control size. + +[Storeon]: https://github.com/storeon/storeon +[Size Limit]: https://github.com/ai/size-limit + + +## Example +![Example](example.gif) ## Installation @@ -23,32 +30,16 @@ If you want sync state between tabs of the browser you should import the `crossT import createStore from 'storeon' import crossTab from 'cross-tab' -let increment = store => { +const increment = store => { store.on('@init', () => ({ count: 0 })) store.on('inc', ({ count }) => ({ count: count + 1 })) } -export const store = createStore([increment, crossTab()]) -``` - -```js -import useStoreon from 'storeon/react' // or storeon/preact +const store = createStore([increment, crossTab()]) -export default const Counter = () => { - const { dispatch, count } = useStoreon('count') - return -} -``` - -```js -import StoreContext from 'storeon/react/context' - -render( - - - , - document.querySelector('#app') -) +store.on('@changed', (store) => { + document.querySelector('.counter').innerText = store.count +}) ``` @@ -61,13 +52,16 @@ render(

- -## Example -![Example](example.gif) - - +## API ### crossTab(config) +```js +const config = { + key: 'storeon-crosstab', + filter: (event, data) => event !== 'dec' +} +``` + ```js typeof config.key === 'string' ``` @@ -75,10 +69,10 @@ typeof config.key === 'string' Default value of `config.key` is `storeon-crosstab`. This key is using to sync data in local storage. ```js -typeof config.resetInit === 'boolean' +typeof config.filter === 'function' ``` -Default value of `config.resetInit` is `false`. This key is used to reset the state at page by overload. +Callback function to filter actions to be synchronized. Should return `true` if need sync this action. Takes parameters of an event name and a data that is sent. ## LICENSE diff --git a/example.gif b/example.gif index ed951c4..3ab4d70 100644 Binary files a/example.gif and b/example.gif differ diff --git a/package.json b/package.json index 4b52724..4ec297b 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,8 @@ "dictionary": [ "storeon", "versioning", - "cross-tab" + "cross-tab", + "gzipped" ] } }