https://github.com/chainlist/svelte-syncable

Syncable store for Svelte
https://github.com/chainlist/svelte-syncable

svelte svelte-framework svelte-js svelte-v3 svelte3 sveltejs

Last synced: 4 months ago
JSON representation

Syncable store for Svelte

• Host: GitHub
• URL: https://github.com/chainlist/svelte-syncable
• Owner: chainlist
• Created: 2019-06-25T12:28:53.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-04T01:04:43.000Z (about 2 years ago)
• Last Synced: 2024-09-29T12:02:12.937Z (4 months ago)
• Topics: svelte, svelte-framework, svelte-js, svelte-v3, svelte3, sveltejs
• Language: JavaScript
• Size: 1.57 MB
• Stars: 26
• Watchers: 1
• Forks: 3
• Open Issues: 19
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Svelte Store Storage plugin [![Build Status](https://travis-ci.org/chainlist/svelte-syncable.svg?branch=master)](https://travis-ci.org/chainlist/svelte-syncable)

## Install

`npm i -D svelte-syncable`

or

`yarn add -D svelte-syncable`

## How to use

Setting a prefix is optional, the default one is `svelteStore`

Create your syncable store value

```javascript

// store.js

import { syncable, setPrefix } from 'svelte-syncable';

// All the syncable value will be stored as "foorbar-{name}"

setPrefix('foobar');

export const answer = syncable('answer', 42);

export const todos = syncable('todos', [

    { id: 1, text: 'Find the answer of life', done: false }

]);

```

Use your store value as every other svelte store observables

```html

// Component.svelte

    import { answer, todos } from './store.js';



    {#each $todos as todo, todo.id}

        
{todo.text}

    {/each}



The count is {$answer}

```

## API

### setPrefix(prefix: string): void

Set the localStorage prefix to {name}

The function has to be called on the top of your store.js file.

### syncable(name: string, value: any, hydrate: boolean = true): SvelteObservable

Create a svelte observable store value and synchronize it with the localStorage.

The value will by hydrated from the localStorage by default, set `hydrate` to false to avoid this behavior.

The `hydrate` parameter is optional and set to true by default.

```javascript

import { syncable } from 'svelte-syncable';

import { writable } from 'svelte/store';

export const count = syncable('count', 0, false);

```