# useList

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

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

```bash
yarn add @corets/use-list
```

{% endtab %}

{% tab title="npm" %}

```
npm install --save @corets/use-list
```

{% endtab %}
{% endtabs %}

This is a React integration for this package:

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

## useList() <a href="#uselist" id="uselist"></a>

Use observable lists inside React components:

```jsx
import React from "react"
import { createList } from "@corets/list"
import { useList } from "@corets/use-list"

const globalList = createList(["apple", "oranges"])

const Example = () => {
  const list1 = useList(["apples", "oranges"])
  const list2 = useList(() => createList(["apples", "oranges"]))
  const list3 = useList(globalList)
  // alternative syntax
  const [list, setList] = useList(globalList).use()
  
  const addItem = () => list1.add("tomatoes")
  
  return (
    <div>
      <button onClick={addItem}>Items: {list1.get().join(",")}</button>
    </div>
  )
}
```