https://github.com/storeon/crosstab

Module for Storeon to synchronize actions for browser tabs
https://github.com/storeon/crosstab

Last synced: about 2 months ago
JSON representation

Module for Storeon to synchronize actions for browser tabs

• Host: GitHub
• URL: https://github.com/storeon/crosstab
• Owner: storeon
• License: mit
• Created: 2019-05-10T10:25:58.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-06T01:50:21.000Z (over 1 year ago)
• Last Synced: 2024-07-23T23:22:06.841Z (2 months ago)
• Language: JavaScript
• Homepage: https://storeon.github.io/crosstab/
• Size: 1.97 MB
• Stars: 53
• Watchers: 4
• Forks: 5
• Open Issues: 15
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Storeon Crosstab



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

## Example

![Example](example.gif)

## Installation

```

npm install @storeon/crosstab

# or

yarn add @storeon/crosstab

```

## Usage

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

})

```

## API

```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.

## Server-side rendering

`@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' })

  ] : []

])

```

## Sponsor



  

    

  



## LICENSE

MIT