Module for storeon to sync state at different tabs of the browser
npm install @storeon/crosstab alt="Storeon logo by Anton Lovchikov" width="140">
Module for [Storeon] to synchronize actions for browser tabs with filtering of events that need to be synchronized.
It size is 219 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
```
npm install @storeon/crosstabor
yarn add @storeon/crosstab
If you want sync state between tabs of the browser you should import the crossTab from @storeon/crosstab and add this module to createStore.
`js
import { createStoreon } from 'storeon'
import { persistState } from '@storeon/localstorage'
import { crossTab } from '@storeon/crosstab'
const increment = store => {
store.on('@init', () => ({ count: 0, openMenu: false }))
store.on('inc', ({ count }) => ({ count: count + 1 }))
store.on('toggleMenu', ({ openMenu }) => ({ openMenu: !openMenu }))
}
const store = createStoreon([
increment,
persistState(),
crossTab({ filter: (event, data) => event !== 'toggleMenu' })
])
store.on('@changed', (store) => {
document.querySelector('.counter').innerText = store.count
})
`
`js
import crossTab from '@storeon/crosstab'
const moduleCrossTab = crossTab({
filter: (event, data) => event !== 'dec',
key: 'storeon-crosstab'
})
`
Function crossTab could have options:
* __key__: key for sync data in local storage.
* __filter__: 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.
@storeon/crosstab is not compatible with server-side rendering since it require window to operate. You can exclude it during server-side render process.
`js``
const store = createStoreon([
increment,
...typeof window !== 'undefined' ? [
crossTab({ filter: (event, data) => event !== 'toggleMenu' })
] : []
])
alt="Sponsored by Evrone" width="210">
MIT