# 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()
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.corets.io/observables/list.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.