> For the complete documentation index, see [llms.txt](https://docs.corets.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.corets.io/observables/list.md).

# List

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

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

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

{% endtab %}

{% tab title="npm" %}

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

{% endtab %}
{% endtabs %}

Seamless React integration is shipped in a separate package:

{% content-ref url="/pages/-MeeGIckpb\_jmyQLy7TY" %}
[useList](/hooks/use-list.md)
{% endcontent-ref %}

There is a version of this package that syncs directly to the `localStorage`:

{% content-ref url="/pages/-MeeEJek1b6Kf63VvtQ5" %}
[Local Storage List](/observables/local-storage-list.md)
{% endcontent-ref %}

## createList() <a href="#createlist" id="createlist"></a>

Creates a new instance of observable list:

```typescript
import { createList } from "@corets/list"

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

Create a new instance without the factory function:

```typescript
import { List } from "@corets/list"

const list = new List(["some", "data"])
```

Create a new instance with a custom differ:

```typescript
import { createList } from "@corets/list"

const differ = (oldValue, newValue) => true
const list = createList(["some", "data"], { differ })
```

## List.get() <a href="#listget" id="listget"></a>

Retrieve everything from the list:

```typescript
list.get()
```

## List.getAt() <a href="#listgetat" id="listgetat"></a>

Retrieve a value at the specific index:

```typescript
list.getAt(0)
```

## List.set() <a href="#listset" id="listset"></a>

Replace everything in the list:

```typescript
list.set(["mango", "potato"])
```

## List.add() <a href="#listadd" id="listadd"></a>

Append some new values to the list:

```typescript
list.add("oranges", "beans")
```

## List.addAt() <a href="#listaddat" id="listaddat"></a>

Add a value at the specific index:

```typescript
list.addAt(1, "chili")
```

## List.has() <a href="#listhas" id="listhas"></a>

Check if a specific value is in the list:

```typescript
list.has("oranges")
```

## List.hasAt() <a href="#listhasat" id="listhasat"></a>

Check if there is a value at the specific index:

```typescript
list.hasAt(1)
```

## List.remove() <a href="#listremove" id="listremove"></a>

Remove a value from the list:

```typescript
list.remove("beans")
```

## List.removeAt() <a href="#listremoveat" id="listremoveat"></a>

Remove value at the specific index:

```typescript
list.removeAt(1)
```

## List.indexOf() <a href="#listindexof" id="listindexof"></a>

Get index of a specific value:

```typescript
list.indexOf("oranges")
```

## List.filter() <a href="#listfilter" id="listfilter"></a>

Filter values in the list:

```typescript
list.filter((value, index) => true)
```

## List.map() <a href="#listmap" id="listmap"></a>

Map values in the list:

```typescript
list.map((value, index) => newValue)
```

## List.forEach() <a href="#listforeach" id="listforeach"></a>

Iterate over values in the list:

```typescript
list.forEach((value, index) => {})
```

## List.listen() <a href="#listlisten" id="listlisten"></a>

Listen to changes:

```typescript
list.listen(state => console.log(state))
```

Invoke listener immediately:

```typescript
list.listen(state => console.log(state), { immediate: true })
```

Listen with a custom differ:

```typescript
const differ = (oldValue, newValue) => true

list.listen(state => console.log(state), { differ })
```

## List.use() <a href="#listuse" id="listuse"></a>

Convenience method for people used to React's `useState` syntax:

```typescript
import { createList } from "@corets/list"

const [list, setList] = createList([1, 2]).use()
```