# Local Storage List

Source code is hosted on [GitHub](https://github.com/corets/local-storage-list)

{% tabs %}
{% tab title="yarn" %}

```bash
yarn add @corets/local-storage-list
```

{% endtab %}

{% tab title="npm" %}

```
npm install --save @corets/local-storage-list
```

{% endtab %}
{% endtabs %}

Seamless React integration is shipped in a separate package:

{% content-ref url="../hooks/use-list" %}
[use-list](https://docs.corets.io/hooks/use-list)
{% endcontent-ref %}

This is a `localStorage` version of this package:

{% content-ref url="list" %}
[list](https://docs.corets.io/observables/list)
{% endcontent-ref %}

## Quick Start <a href="#react" id="react"></a>

Example of how to use this package in React:

```typescript
import React from "react"
import { createLocalStorageList } from "@corets/local-storage-list"
import { useList } from "@corets/use-list"

const Example = () => {
  const list = useList(() => createLocalStorageList("storageKey", ["apple", "banana"]))
  const addFruit = () => list.add("pineapple")
  return (
    <div>
      Fruits: {list.get().join(",")}
      <button onClick={addFruit}>Add fruit</button>
    </div>
  )
}
```

## createLocalStorageList() <a href="#createlocalstoragelist" id="createlocalstoragelist"></a>

Create a new observable list:

```typescript
import { createLocalStorageList } from "@corets/local-storage-list"

const list = createLocalStorageList("storageKey", ["some", "data"])
```