# createSelector

Create a type-safe selector for a store slice's state

## Import

```ts
import { createSelector } from "@videojs/store";
```

`createSelector` is also re-exported from `@videojs/react` and `@videojs/html`.

`createSelector` creates a type-safe selector function for a given slice. The returned selector extracts that slice’s state from the full store state, or returns `undefined` if the slice is not configured.

The built-in selectors ([`selectPlayback`](https://videojs.org/docs/framework/html/reference/api/feature-playback), [`selectBuffer`](https://videojs.org/docs/framework/html/reference/api/feature-buffer), etc.) are all created with `createSelector`. Use it to create selectors for custom slices.

**my-custom-selector.ts**

```ts
import { createSelector } from '@videojs/store';
import { myCustomSlice } from './my-custom-slice';

const selectCustom = createSelector(myCustomSlice);

// Use with usePlayer (React) or PlayerController (HTML)
const state = selectCustom(store.state);
```

Pass selectors to [`PlayerController`](https://videojs.org/docs/framework/html/reference/api/player-controller) or [`StoreController`](https://videojs.org/docs/framework/html/reference/api/store-controller) for reactive subscriptions.

## API Reference

`createSelector<S extends AnySlice>(slice): Selector<object, InferSliceState<S> | undefined>`

### Parameters

| Parameter | Type | Default | Description |
| --- | --- | --- | --- |
| `slice` (required) | `S` | — | The slice to create a selector for. |

### Return Value

| Type |
| --- |
| `{ (state: object): (S extends Slice<any, infer State, infer Derived> ? Simplify<PublicSourceState<State> & Derived> : never) \| undefined; displayName?: string }` |

---

HTML documentation: https://videojs.org/docs/framework/html/llms.txt
All documentation: https://videojs.org/llms.txt