open-index/open-npm huggingface dataset:
npm package: @scaleway/use-analytics
Description: A small hook to handle events analytics
Latest version: 1.0.5

# `@scaleway/use-analytics`

## A tiny hooks to handle analytics events

## Install

```bash
$ pnpm add @scaleway/use-analytics
```

## Usage

### Event directory

Create an events directory with all you specific events.

```
events
 ┣ pageTypes
 ┃ ┗ index.ts
 ┣ 📂loginEvent
 ┃ ┗ index.ts
 ┃ index.ts ( export all you functions )

```

Each event will have a format like this:

```typescript
const pageVisited =
  (analytics?: Analytics) =>
  async (args: Args): Promise<void> => {
    // here do what you have to do with analytics
    await analytics?.page(args)
  }

export default pageVisited
```

```typescript
import pageTypes from './pageTypes'
import testEvents from './testEvents'

export default {
  pageTypes,
  testEvents,
}
```

### Context Load

Inside you global app you have to use our Analytics Provider to allow loading of analytics from your settting app.
This will trigger a load and return analitycs function inside you provider.

```javascript
import { AnalyticsProvider } from '@scaleway/use-analytics'
import { captureMessage } from '@sentry/browser'
import events from './events'

const App = () => (
  <AnalyticsProvider
    settings={{ cdn: 'https://cdn.url', writeKey: 'WRITE_KEY' }}
    events={events}
    onError={e => captureMessage(`Error on Analytics: ${e.message}`)}
  >
    <App />
  </AnalyticsProvider>
)
```

### Hook utility

Now you maybe want to use your events inside your app .
If you are using typescript, you may

```typescript
import { useAnalytics } from '@scaleway/use-analytics'
import type { Events } from 'types/events'
import { Form, Submit } from '@scaleway/form'

const Login = () => {
  const { events } = useAnalytics<Events>()

  const onSubmit = async args => {
    // make you api calls
    await events.login()
  }

  return (
    <Form onSubmit={onSubmit}>
      // others fields
      <Submit />
    </Form>
  )
}
```
npm package: @scaleway/use-growthbook
Description: Utility package to expose AB test tool
Latest version: 2.1.14

# `@scaleway/use-growthbook`

Tiny adapter to easily add [GrowthBook](https://www.growthbook.io/) to your React Application.
The idea of this package is to propose a _facade pattern_ above GrowthBook React SDK.

## Install

```bash
$ pnpm add @scaleway/use-growthbook
```

## How to use

### First add the provider to your application roots

```js
import { AbTestProvider } from '@scaleway/use-growthbook'
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <React.StrictMode>
    <AbTestProvider
      config={{ apiHost: 'string', clientKey: 'string', enableDevMode: true }}
      anonymousId="123456789"
      trackingCallback={(experiment, result) => console.log(experiment, result)}
      errorCallback={console.error}
    >
      <App />
    </AbTestProvider>
  </React.StrictMode>,
  document.getElementById('root'),
)
```

### Attributes

A hook `useAbTestAttributes` is available to get currentAttributes and to set new ones dynamically.

### API

Exported utils from GrowthBook React are listed here:

- FeatureString
- FeaturesReady
- IfFeatureEnabled
- useExperiment
- useFeature
- withRunExperiment
- useFeatureIsOn
- useFeatureValue
npm package: @scaleway/use-gtm
Description: A small hook to handle gtm in a react app
Latest version: 3.0.1

# `@scaleway/use-gtm`

## A tiny provider to handle Google Tag Manager in React

## Install

```bash
$ pnpm add @scaleway/use-gtm
```

## Usage

### Basic

```tsx
import GTMProvider, { useGTM } from '@scaleway/use-gtm'

const Page = () => {
  const { sendGTM } = useGTM()

  sendGTM?.({
    hello: 'world
  })

  return <p>Hello World</p>
}

const App = () => (
  <GTMProvider id="testId">
    <Page />
  </GTMProvider>
)
```

### With injected events

```tsx
import GTMProvider, { useGTM } from '@scaleway/use-gtm'

const events = {
  sampleEvent: (sendGTM?: SendGTM) => (message: string) => {
    sendGTM?.({
      event: 'sampleEvent',
      hello: message,
    })
  },
}

const Page = () => {
  const { events } = useGTM()

  events.sampleEvent?.('world')

  return <p>Hello World</p>
}

const App = () => (
  <GTMProvider id="testId">
    <Page />
  </GTMProvider>
)
```

### With global setter

```tsx
import GTMProvider, { sendGTM } from '@scaleway/use-gtm'

const Page = () => {
  sendGTM?.({
    hello: 'world
  })

  return <p>Hello World</p>
}

const App = () => (
  <GTMProvider id="testId">
    <Page />
  </GTMProvider>
)
```
npm package: @scaleway/use-media
Description: A small hook to track CSS media query state
Latest version: 3.0.7

# `@scaleway/use-media`

## A small hook to track CSS media query state

This library has been forked from [use-media](https://github.com/streamich/use-media), many thanks to the original author, [Vadim Dalecky](https://github.com/streamich).

## Install

```bash
$ pnpm add @scaleway/use-media
```

## Usage

### With `useEffect`

```tsx
import { useMedia } from '@scaleway/use-media'

const App = () => {
  // Accepts an object of features to test
  const isWide = useMedia({ minWidth: '1000px' })
  // Or a regular media query string
  const reduceMotion = useMedia('(prefers-reduced-motion: reduce)')

  return <div>Screen is wide: {isWide ? '😃' : '😢'}</div>
}
```

### With `useLayoutEffect`

```tsx
import { useMediaLayout } from '@scaleway/use-media'

const App = () => {
  // Accepts an object of features to test
  const isWide = useMediaLayout({ minWidth: '1000px' })
  // Or a regular media query string
  const reduceMotion = useMediaLayout('(prefers-reduced-motion: reduce)')

  return <div>Screen is wide: {isWide ? '😃' : '😢'}</div>
}
```
npm package: @scaleway/use-query-params
Description: A small hook to handle params
Latest version: 5.0.19

# `@scaleway/use-query-params`

## A tiny hooks to handle use-query-params

## Install

```bash
$ pnpm add @scaleway/use-query-params react-router-dom
```

## Usage

```js
import React from 'react'
import { render } from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'
import useQueryParams from '@scaleway/use-query-params'

const App = () => {
  const { queryParams, setQueryParams } = useQueryParams()
  const { user } = queryParams
  const setUser = () => setQueryParams({ user: 'John' })
  // ?user=John

  return (
    <>
      <h1>User: {user}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}

render(
  <Router>
    <App />
  </Router>,
  document.getElementById('react-root'),
)
```

### Set query params

Merge current query params with the new ones passed in parameters.

```js
// In this exemple we assume that we have an URL that include : `?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'

const Component = () => {
  const { queryParams, setQueryParams } = useQueryParams()
  const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
  const setUser = () => setQueryParams({ user: 'John' }) // user will be "John" and company will be "Scaleway"
  // ?company=Scaleway&user=John

  return (
    <>
      <h1>User: {user}</h1>
      <h1>Company: {company}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}
```

### Replace query params

Erase current query params and replace by the new ones passed in parameters.

```js
// In this exemple we assume that we have an URL that include : `?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'

const Component = () => {
  const { queryParams, replaceQueryParams } = useQueryParams()
  const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
  const setUser = () => replaceQueryParams({ user: 'John' }) // user will be "John" and company will be undefined
  // ?user=John

  return (
    <>
      <h1>User: {user}</h1>
      <h1>Company: {company}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}
```

### Push onto the stack instead of replacing

To avoid mutating history

```js
// In this exemple we assume that we have an URL that include : `?company=Scaleway".
import React from 'react'
import useQueryParams from '@scaleway/use-query-params'

const Component = () => {
  const { queryParams, replaceQueryParams } = useQueryParams()
  const { user, company } = queryParams // user will be undefined and company will be "Scaleway"
  const setUser = () => replaceQueryParams({ user: 'John' }, { push: true }) // user will be "John" and company will be undefined
  // ?user=John

  return (
    <>
      <h1>User: {user}</h1>
      <h1>Company: {company}</h1>
      <button onClick={setUser}>Set User John</button>
    </>
  )
}
```
npm package: @scaleway/use-random-name
Description: A small react utility to generate a random name
Latest version: 1.0.10

# `@scaleway/random-name`

A tiny utility to generate random names

Fully inspired by [Moby name generator](https://github.com/moby/moby/blob/master/pkg/namesgenerator/names-generator.go)

---

## Install

```bash
$ pnpm add @scaleway/use-random-name
```

## Usage

As a React hook

```js
import React from 'react'
import useRandomName from '@scaleway/random-name'

const Component = () => {
  const name = useRandomName()

  return <span>{name}</span>
}
```

You can also access the underlying @scaleway/random-name package with a named export

```js
import { randomName } from '@scaleway/use-random-name'

// randomName(prefix: string = '', separator: string = '-'): string

randomName() // => "admiring-allen"
randomName('superb') // => "superb-admiring-allen"
randomName('superb', '_') // => "superb_admiring_allen"
randomName('', '_') // => "admiring_allen"
```
npm package: @scaleway/use-segment
Description: A small hook to handle segment
Latest version: 1.1.11

# `@scaleway/use-segment`

## A tiny hooks to handle segment events

use [@segment/analytics-next](https://github.com/segmentio/analytics-next)

## Install

```bash
$ pnpm add @scaleway/use-segment
```

## Usage

### Event directory

Create an events directory with all you specific events.

```
events
 ┣ pageTypes
 ┃ ┗ index.ts
 ┣ 📂loginEvent
 ┃ ┗ index.ts
 ┃ index.ts ( export all you functions )

```

Each event will have a format like this:

```typescript
const pageVisited =
  (analytics?: Analytics) =>
  async (args: Args): Promise<void> => {
    // here do what you have to do with analytics
    await analytics?.page(args)
  }

export default pageVisited
```

```typescript
import pageTypes from './pageTypes'
import testEvents from './testEvents'

export default {
  pageTypes,
  testEvents,
}
```

### Context Load

Inside you global app you have to use our Segment Provider to allow loading of segment from your settting app.
This will trigger a load and return analitycs function inside you provider.

```javascript
import SegmentProvider from '@scaleway/use-segment'
import { captureMessage } from '@sentry/browser'
import events from './events'

const App = () => (
  <SegmentProvider
    settings={{ cdn: 'https://cdn.url', writeKey: 'WRITE_KEY' }} // check your gtm writeKey
    events={events}
    onError={e => captureMessage(`Error on Segment: ${e.message}`)}
  >
    <App />
  </SegmentProvider>
)
```

### Hook utility

Now you maybe want to use your events inside your app .
If you are using typescript, you may

```typescript
import { useSegment } from '@scaleway/use-segment'
import type { Events } from 'types/events'
import { Form, Submit } from '@scaleway/form'

const Login = () => {
  const { events } = useSegment<Events>()

  const onSubmit = async args => {
    // make you api calls
    await events.login()
  }

  return (
    <Form onSubmit={onSubmit}>
      // others fields
      <Submit />
    </Form>
  )
}
```
npm package: @scaleway/use-storage
Description: A React hook to interact with local/session storage in reactive way
Latest version: 3.1.6

# `@scaleway/use-storage`

A React hook to interact with local/session storage in reactive way with the same API as setState

---

## Install

```bash
$ pnpm add @scaleway/use-storage
```

## Usage

With localStorage

```js
import React from 'react'
import { useLocalStorage } from '@scaleway/use-storage'

const Component = () => {
  const [value, setValue] = useLocalStorage('key')

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => setValue('test from hook')}>
        Click me to set value to "test from hook"
      </button>
      <button onClick={() => localStorage.setItem('key', 'test from window')}>
        Click me to set value to "test from window"
      </button>
    </div>
  )
}
```

With sessionStorage

```js
import React from 'react'
import { useSessionStorage } from '@scaleway/use-storage'

const Component = () => {
  const [value, setValue] = useSessionStorage('key')

  return (
    <div>
      <span>{value}</span>
      <button onClick={() => setValue('test from hook')}>
        Click me to set value to "test from hook"
      </button>
      <button onClick={() => localStorage.setItem('key', 'test from window')}>
        Click me to set value to "test from window"
      </button>
    </div>
  )
}
```

With initialValue

```js
import React from 'react'
import { useLocalStorage } from '@scaleway/use-storage'

const Component = () => {
  const [value, setValue] = useLocalStorage('key', 'initial')

  return (
    <div>
      <span>{value}</span> // Will be "initial" of no other value is already set
      <button onClick={() => setValue('test from hook')}>
        Click me to set value to "test from hook"
      </button>
      <button onClick={() => localStorage.setItem('key', 'test from window')}>
        Click me to set value to "test from window"
      </button>
    </div>
  )
}
```
npm package: @scaleway/validate-icu-locales
Description: A small cli to handle icu errors on locales files
Latest version: 3.1.20

# `@scaleway/validate-icu-locales`

## A tiny cli to handle ICU errors on locales files.

## Install

Requirements

- Node should be installed

```bash
$ pnpm add -D @scaleway/validate-icu-locales
```

## Usage

We can parse JSON, TS and JS if theses files use default export.

```
validate-icu "../**/en.json"
```

If there is an error on a local, the CLI will throw an Error and print all errors.

## Error

```
export default from:  ../src/__tests__/locales/en-1.js  is not an object
{
  errors: [
    {
      message: 'EXPECT_ARGUMENT_CLOSING_BRACE',
      value: '{count, plural, =0 {Minute} =1 {Minute} other {Minutes',
      key: 'units.minutes.label',
      filePath: '../../packages/validate-icu-locales/src/__tests__/locales/en.js'
    },
    {
      message: 'EXPECT_ARGUMENT_CLOSING_BRACE',
      value: '{count, plural, =0 {Minute} =1 {Minute} other {Minutes',
      key: 'units.minutes.label',
      filePath: '../../packages/validate-icu-locales/src/__tests__/locales/en.json'
    },
    {
      message: 'EXPECT_ARGUMENT_CLOSING_BRACE',
      value: '{count, plural, =0 {Minute} =1 {Minute} other {Minutes',
      key: 'units.minutes.label',
      filePath: '../../packages/validate-icu-locales/src/__tests__/locales/en.ts'
    }
  ]
}
```