import { Meta } from '@storybook/addon-docs/blocks'

<Meta
    title="pv-grid/Hooks/useLocalStoragePreferences"
    parameters={{
        viewMode: 'docs',
        previewTabs: {
            canvas: { hidden: true },
        },
    }}
/>

# useLocalStoragePreferences

This creates a stable grid localStorage preferences adapter based on a unique key and optionally a version.

`import { useLocalStoragePreferences } from '@planview/pv-grid'`

### Overview

When passed into our Grid, this will automatically persist (in localStorage) user customizations to column width, visibility and column order.

**Important**: Local storage is _not secure_ storage. This adapter stores the column `id`, `width`, `hidden`-state and a version number. If the `id` contains sensitive customer data for some reason, you should not use this adapter.

This adapter will ignore any saved preferences in these situations:

- the columns saved do not match the current columns definition (due to a column being added or removed, or the id of a column changing)
- the version saved does not match the current version
- the data is malformed (perhaps a user edited it, or was attempting to exploit this mechanism)

This adapter will have no effect if `localStorage` is not enabled.

This can be used as a reference implementation. If your product can instead persist this data to an alternate form of storage or you'd like to resolve any of the above limitations, you can [use the source file](https://github.com/planview-ds/react-pvds/blob/master/packages/pv-grid/src/hooks/use-local-storage-preferences.tsx) in Github as an example of how to write an adapter

### Definition

```jsx
function useLocalStoragePreferences = (
    id: string
    version?: string
) : GridPreferencesAdapter
```

### Usage

```jsx
import { Grid, useLocalStoragePreferences } from '@planview/pv-grid'

const columnSchemaVersion = "v2";

const MyComponent = () => {
    const preferencesAdapter = useLocalStoragePreferences( "unique-grid-id", columnSchemaVersion )

    return <Grid columns={ ... } rows={ ... } preferencesAdapter={ preferencesAdapter } />
}
```