open-index/open-npm huggingface dataset:
npm package: @loipham/material-chips
Description: The Material Components for the Web chips component
Latest version: 14.0.4

<!--docs:
title: "Chips"
layout: detail
section: components
excerpt: "Chips are compact elements that represent an attribute, text, entity, or action."
iconId: chip
path: /catalog/chips/
-->

# Chips

**Contents**

* [Using chip](#using-chips)
* [Chips](#chips)
* [API](#api)

>Looking for deprecated chips resources? Visit the [deprecated readme](deprecated/README.md).

## Using chips

Chips are compact elements that allow users to enter information, select a choice, filter content, or trigger an action. Chips must always be used inside a chip set.

### Installing chips

```
npm install @loipham/material-chips
```

### Styles

```scss
@use "@loipham/material-chips/styles";
```

### JavaScript instantiation

**Note**: there's work planned to replace the `mdc-evolution-*` prefix of chips with the standard `mdc-chip-*` prefix.

```js
import {MDCChipSet} from '@loipham/material-chips';
const chipset = new MDCChipSet(document.querySelector('.mdc-evolution-chip-set'));
```

## Chips

Chips are comprised of [chip sets](./chip-set) which are comprised of [chip](./chip) instances which are in turn comprised of [actions](./action). See the readme for each subcomponent for more detail.

### Basic action chip set example

```html
<span class="mdc-evolution-chip-set" role="grid">
  <span class="mdc-evolution-chip-set__chips" role="presentation">
    <span class="mdc-evolution-chip" role="row" id="c0">
      <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
        <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="0">
          <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
          <span class="mdc-evolution-chip__text-label">Chip one</span>
        </button>
      </span>
    </span>
    <span class="mdc-evolution-chip" role="row" id="c1">
      <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell">
        <button class="mdc-evolution-chip__action mdc-evolution-chip__action--primary" type="button" tabindex="-1">
          <span class="mdc-evolution-chip__ripple mdc-evolution-chip__ripple--primary"></span>
          <span class="mdc-evolution-chip__text-label">Chip two</span>
        </button>
      </span>
    </span>
  </span>
</span>
```

## API

See the readme of each subcomponent for more detail.

- [Chip set API](./chip-set#api)
- [Chip API](./chip#api)
- [Action API](./action#api)

### Usage within frameworks

If you are using a JavaScript framework, such as React or Angular, you can create chips for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../../docs/integrating-into-frameworks.md).
npm package: @loipham/material-feature-targeting
Description: Material Components for the web Feature Targeting Scss helpers
Latest version: 14.0.4

<!--docs:
title: "Feature Targeting"
layout: detail
section: components
excerpt: "Provides infrastructure to allow CSS styles to be included or excluded categorically."
path: /catalog/feature-targeting/
-->

# Feature Targeting

MDC Feature Targeting provides infrastructure to allow CSS styles to be included or excluded categorically.

Most of the time, you shouldn't need to depend on `mdc-feature-targeting` directly. However, understanding it can be useful if you're interested in having more control over when certain types of MDC styles are emitted.

## Installation

```
npm install @loipham/material-feature-targeting
```

## Basic Usage

### Styles

Authoring component styles:

```scss
@use "@loipham/material-feature-targeting";

@mixin my-component-core-styles($query: feature-targeting.all()) {
  $feat-structure: feature-targeting.create-target($query, structure);

  @include feature-targeting.targets($feat-structure) {
    // ...
  }
}
```

Consuming component styles:

```scss
@use "@loipham/material-feature-targeting";
@use "my-component-mixins";

// To include all styles (using the default of mdc-feature-all() defined above):
@include my-component-core-styles;

// Or, to include a specific subset of styles:
@include my-component-core-styles(structure);
@include my-component-core-styles(feature-targeting.any(color, typography));
// The above two @includes and the following @include would produce equivalent results:
@include my-component-core-styles(feature-targeting.without(animation));
```

## Sass Mixins and Functions

Mixin | Description
--- | ---
`targets($feature-targets...)` | Conditionalizes content to only be emitted if the given feature target(s) is/are queried.

Function | Description
--- | ---
`create-target($feature-query, $targeted-feature)` | Returns a variable to be passed to `targets` in order to filter emitted styles.
`all($feature-queries...)` | Returns a query object which will result in emitting `targets` blocks that match _all_ of the specified features. Passing no arguments results in all blocks being emitted, which is the most common use case.
`any($feature-queries...)` | Returns a query object which will result in emitting `targets` blocks that match _any_ of the specified features. Passing no arguments results in no blocks being emitted.
`without($feature-query)` | Returns a query object which will result in emitting `targets` blocks that do _not_ match the specified feature.

`$feature-query` and `$feature-queries` refer to one or more of the values listed below under Supported Features.

### Supported Features

MDC Web's styles are currently split according to the following features:

* `structure` - All baseline styles that don't fit into any other category
* `animation` - Styles responsible for causing animations and transitions to occur
* `color` - Color-specific styles which rely on `mdc-theme` variables
* `typography` - Typography-specific styles which rely on `mdc-typography`
npm package: @loipham/material-progress-indicator
Description: The Material Components for the web interface for Progress Indicators
Latest version: 14.0.4

<!--docs:
title: "Progress Indicator"
layout: detail
section: components
excerpt: "Material Design-styled progress indicators."
iconId: progress_linear
path: /catalog/progress-indicator/
-->

# Progress Indicators

The MDC Progress Indicator component exposes common foundation and component interfaces for a progress indicator. Components that implement these interfaces include [linear progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-linear-progress) and [circular progress](https://github.com/material-components/material-components-web/tree/master/packages/mdc-circular-progress).
[Material Design progress & activity requirements](https://material.io/go/design-progress-indicators).

## Installation

```
npm install @loipham/material-progress-indicator
```

## Basic Usage

### MDCProgressIndicatorFoundation API

MDC Progress Indicator Foundation exposes the following methods:

| Method Signature | Description |
| --- | --- |
| `setDeterminate(value: boolean) => void` | Toggles the component between the determinate and indeterminate state. |
| `isDeterminate() => boolean` | Whether or not the component is in determinate state. |
| `setProgress(value: number) => void` | Sets the progress to this value. Value should be between [0, 1]. |
| `getProgress() => number` | The current progress value in the interval [0,1]. |
| `open() => void` | Puts the component in the open state. |
| `close() => void` | Puts the component in the closed state. |
| `isClosed() => boolean` | Whether or not the progress indicator is closed. |

### MDCProgressIndicator Component API

MDC Progress Indicator exposes the following API:

| Method Signature | Description |
| --- | --- |
| `determinate: boolean` | Whether the indicator is in the determinate or indeterminate state. |
| `progress: number` | The current progress. Value should be between [0, 1]. |
| `open() => void` | Puts the component in the open state. |
| `close() => void` | Puts the component in the closed state. |
npm package: @loipham/material-touch-target
Description: Touch target mixins and variables for Material Components for the web
Latest version: 14.0.4

<!--docs:
title: "Touch Target"
layout: detail
section: components
excerpt: "Increased touch targets for components"
path: /catalog/touchtarget/
-->

# Touch Target

Touch targets are the parts of the screen that respond to user input. They extend beyond the visual bounds of an element.
For example, a button may appear to be 48 x 36 px, but the padding surrounding it comprises the full 48 x 48 px touch target.

Material Design spec states that touch targets should be at least 48 x 48 px.
The MDC Web library provides mixins and guidance on adding an increased touch target for the following components:
* Button
* Chips
* Checkbox
* Radio
* Mini FAB

## Design & API Documentation

<ul class="icon-list">
  <li class="icon-list-item icon-list-item--spec">
    <a href="https://material.io/design/usability/accessibility.html#layout-typography">Material Design guidelines: Touch Targets</a>
  </li>
</ul>

## Installation

```
npm install @loipham/material-touch-target
```

## Basic Usage

### HTML Structure

For a given button component:

```html
<button class="mdc-button">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">My Inaccessible Button</span>
</button>
```

You would add an increased touch target as follows:

```html
<div class="mdc-touch-target-wrapper">
  <button class="mdc-button mdc-button--touch">
    <div class="mdc-button__ripple"></div>
    <div class="mdc-button__touch"></div>
    <span class="mdc-button__label">My Accessible Button</span>
  </button>
</div>
```

Note that the outer `mdc-touch-target-wrapper` element is only necessary if you want to avoid potentially overlapping touch targets on adjacent elements (due to collapsing margins).

### Styles

```css
@use "@loipham/material-touch-target/mdc-touch-target";
```

## Style Customization

### Sass Mixins

Mixin | Description
--- | ---
`wrapper` | Applied to the wrapper touch target element.
`touch-target` | Applied to the inner touch target element.
`margin` | Applied to the component root element. Adds margin to compensate for the increased touch target.
npm package: @loja-integrada/admin-components
Description: [![NPM Version](https://img.shields.io/npm/v/@loja-integrada/admin-components.svg)](https://www.npmjs.com/package/@loja-integrada/admin-components)
Author: Loja Integrada
Latest version: 1.3.28

# Admin-Components

[![NPM Version](https://img.shields.io/npm/v/@loja-integrada/admin-components.svg)](https://www.npmjs.com/package/@loja-integrada/admin-components)

This package contains the admin components for the admin dashboard.

## Usage

### Installation

Install the package using your package manager:

```bash
npm install @loja-integrada/admin-components
yarn add @loja-integrada/admin-components
pnpm add @loja-integrada/admin-components
```

### Configure TailwindCSS and PostCSS

The components are built using [TailwindCSS](https://tailwindcss.com/), you need to use the [@loja-integrada/tailwindcss-config](https://www.npmjs.com/package/@loja-integrada/tailwindcss-config) package to use `defaultPreset` and compile the CSS. [Learn more](../tailwindcss-config/README.md)

### Style

Import the CSS file in your project default CSS file (like globals.scss):

```css
@import '@loja-integrada/tailwindcss-config/style.scss';
```

### Import components

You can import the components from the package:

```javascript
import { Button } from '@loja-integrada/admin-components'
```

or

```javascript
import { Button } from '@loja-integrada/admin-components/Button'
```

## Development

### Create a new component

1 - Choose a category for the component (like `components`, `forms`, `indicators`, etc).

2 - Create a new folder inside `src/[category]` with the component name.
Example: `src/forms/InputCurrency`.

3 - Create the component file inside the folder.
Example: `src/forms/InputCurrency/InputCurrency.tsx`.

4 - Create the component story file inside the folder.
Example: `src/forms/InputCurrency/InputCurrency.stories.tsx`.

5 - Create the component test file inside the folder.
Example: `src/forms/InputCurrency/InputCurrency.test.tsx`.

6 - Create the component documentation file inside the folder.
Example: `src/forms/InputCurrency/InputCurrency.doc.mdx`.

7 - Create an `index.ts` file inside the folder to export the component, and export too in parent folder `src/forms/index.ts`.
Example: `export * from './InputCurrency';`.

You should have the following structure:

```
src/
  forms/
    InputCurrency/
      InputCurrency.tsx
      InputCurrency.stories.tsx
      InputCurrency.test.tsx
      InputCurrency.doc.mdx
      index.ts
```

_Obs: If your component only works on the **client-side**, the component file name should be `*.client.tsx`. Example: `InputCurrency.client.tsx`_

### Preview

To preview the components, use the following commands to run Storybook:

```bash
pnpm dev
```

### Test

To run the tests, use the following commands:

```bash
pnpm test
```

To run the tests manually in browser, use the following commands:

```bash
pnpm test:visual
```
npm package: @loja-integrada/eslint-config
Description: This package provides a shared ESLint configuration for front-end projects at Loja Integrada. **Only supports ESLint 8.57.0.**
Author: Loja Integrada
Latest version: 0.0.5

# ESLint Config

This package provides a shared ESLint configuration for front-end projects at Loja Integrada.
**Only supports ESLint 8.57.0.**

## Usage

### Installation

Install the package using your package manager:

```bash
npm install @loja-integrada/eslint-config --save-dev
yarn add @loja-integrada/eslint-config -D
pnpm add @loja-integrada/eslint-config -D
```

And install peer dependencies:

```bash
npx install-peerdeps --dev @loja-integrada/eslint-config
```

### Configure

Create a `.eslintrc.json` file in the root of your project with the following content:

```json
{
  "extends": ["@loja-integrada/eslint-config"]
}
```
npm package: @loja-integrada/tailwindcss-config
Description: [![NPM Version](https://img.shields.io/npm/v/@loja-integrada/tailwindcss-config.svg)](https://www.npmjs.com/package/@loja-integrada/tailwindcss-config)
Author: Loja Integrada
Latest version: 2.1.6

# Tailwind CSS Config

[![NPM Version](https://img.shields.io/npm/v/@loja-integrada/tailwindcss-config.svg)](https://www.npmjs.com/package/@loja-integrada/tailwindcss-config)

This package provides the default Tailwind CSS configuration used in the Loja Integrada projects.

## Usage

### Installation

Install the package using your package manager:

```bash
npm install @loja-integrada/tailwindcss-config
yarn add @loja-integrada/tailwindcss-config
pnpm add @loja-integrada/tailwindcss-config
```

And required packages:

```bash
npm install
yarn add tailwindcss postcss autoprefixer
pnpm add tailwindcss postcss autoprefixer
```

### Configure

Create a `tailwind.config.js` file in the root of your project:

```javascript
import defaultPreset from '@loja-integrada/tailwindcss-config'
import type { Config } from 'tailwindcss'

const config: Pick<Config, 'presets' | 'content' | 'theme'> = {
  presets: [defaultPreset],
  content: ['./src/**/*.{js,ts,jsx,tsx}', './node_modules/@loja-integrada/admin-components/dist/*.*'],
}
export default config
```

And `postcss.config.js` file in the root of your project:

```javascript
/** @type {import("postcss-load-config").Config} */
const config = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

export default config
```

Import the CSS file in your project default CSS file (like globals.scss):

```css
@import '@loja-integrada/tailwindcss-config/style.scss';
```
npm package: @loja-integrada/typescript-config
Description: This package provides a shared TypeScript configuration for front-end projects at Loja Integrada.
Author: Loja Integrada
Latest version: 0.0.4

# Typescript Config

This package provides a shared TypeScript configuration for front-end projects at Loja Integrada.

## Usage

### Installation

Install the package using your package manager:

```bash
npm install @loja-integrada/typescript-config --save-dev
yarn add @loja-integrada/typescript-config -D
pnpm add @loja-integrada/typescript-config -D
```

### Configure

Versions available:

- For components library, use `@loja-integrada/typescript-config/react-library.json`;
- For Nextjs application, use `@loja-integrada/typescript-config/nextjs.json`;
- Other projects, use `@loja-integrada/typescript-config/base.json`.

Create a `tsconfig.json` file in the root of your project with the following content:

```json
{
  "extends": "@loja-integrada/typescript-config/nextjs.json",
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
      "@/public/*": ["./public/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    ".next/dev/types/**/*.ts",
    "next.config.ts"
  ],
  "exclude": ["./out/**/*", "./node_modules/**/*", "**/*.cy.ts"]
}
```
npm package: @lojaintegrada/admin-components
Description: Components for Loja Integrada admin. [https://lojaintegrada.github.io/admin-components/](https://lojaintegrada.github.io/admin-components/)
Author: Loja Integrada Front-End Team
Latest version: 0.8.6

# Admin Components / Styleguide

Components for Loja Integrada admin.
[https://lojaintegrada.github.io/admin-components/](https://lojaintegrada.github.io/admin-components/)

## Comamnds

### Storybook

```bash
yarn storybook
```

### Test

```bash
yarn test
yarn test:cypress
```

### Lint

```bash
yarn lint
# Run before each commit
yarn lint --fix
```

### Check tailwindcss configs

```bash
npx tailwind-config-viewer
```

## Publishing

- Merge the PR to `main`
- Create an [release](https://github.com/lojaintegrada/admin-components/releases) with the pattern `styleguide@VERSION`, like `styleguide@0.0.23`
- Check result at GitHub Actions

Deploy to GitHub Pages is automatic after deploy to NPM

## Testing

This project works with both Jest or Cypress Components.
Use `.spec.` for Cypress and `.test.` for Jest

## Usage

```js
import { Button } from '@lojaintegrada/admin-components'

<Button></Button>
```

### Bundle analysis

Calculates the real cost of your library using [size-limit](https://github.com/ai/size-limit) with `yarn size` and visulize it with `yarn analyze`.

## Module Formats

CJS, ESModules, and UMD module formats are supported.

## Named Exports

Per Palmer Group guidelines, [always use named exports.](https://github.com/palmerhq/typescript#exports) Code split inside your React app instead of your React library.

## Including Styles

Prefer using only Tailwind classes

[WIP]
For vanilla CSS, you can include it at the root directory and add it to the `files` section in your `package.json`, so that it can be imported separately by your users and run through their bundler's loader.

## Others

> If you’re new to TypeScript and React, checkout [this handy cheatsheet](https://github.com/sw-yx/react-typescript-cheatsheet/)
> NOTE: Stories should reference the components as if using the library, similar to the example playground. This means importing from the root project directory. This has been aliased in the tsconfig and the storybook webpack config as a helper.
npm package: @lojaintegrada/tailwindcss-config
Description: TailwindCSS config for Loja Integrada admin
Author: Loja Integrada Front-End Team
Latest version: 1.3.0

# Loja Integrada Admin TailwindCSS Config

<https://lojaintegrada-tailwind.vercel.app/>

## Commands

```bash
yarn tailwind-config-viewer
```

## Publishing

- Merge the PR to `main`
- Create an [release](https://github.com/lojaintegrada/admin-components/releases) with the pattern `tailwindcss@VERSION`, like `tailwindcss@1.0.2`
- Check result at GitHub Actions

Deploy to Vercel is automatic

## Usage

At yout `tailwind.config.js`

```js
module.exports = {
  presets: [
    require('@lojaintegrada/tailwindcss-config/src/defaultPreset')
    // or
    // require('@lojaintegrada/tailwindcss-config/src/pagaLIPreset')
  ],
  // mode: 'jit',
  // purge: [],
  // ...
}
```
npm package: @lojaskd/gulp-tasks
Description: Gulp tasks for use in LojasKD projects
Author: LojasKD development team
Latest version: 1.4.3

# [LojasKD](https://www.lojaskd.com.br) [Gulp](http://gulpjs.com/) tasks [![Code Climate](https://codeclimate.com/github/lojaskd/gulp-tasks/badges/gpa.svg)](https://codeclimate.com/github/lojaskd/gulp-tasks)

## Installation

```
npm install --save-dev @lojaskd/gulp-tasks
```

## Usage

```js
/* gulpfile.js */

const gulp = require('gulp');
const gulpTasks = require('@lojaskd/gulp-tasks');

/**
 * Register the stylesheets task
 */

gulpTasks.stylesheets(gulp, {
  // Task options
});


/**
 * Register the javascripts task
 */

gulpTasks.scripts(gulp, {
  // Task options
});
```

## TODO tasks

 - [ ] clean
 - [x] copy
 - [x] stylesheets
 - [x] javascript
 - [ ] eslint
 - [ ] images
 - [ ] fonts

## License

Code is under [MIT License](/LICENSE) - © [LojasKD.com.br](https://www.lojaskd.com.br/)
npm package: @lojhan/resource-pool-linux-arm-gnueabihf
Description: A generic resource pool implementation for Node.js using N-API and Rust.
Latest version: 2.0.0

# `@lojhan/resource-pool-linux-arm-gnueabihf`

This is the **armv7-unknown-linux-gnueabihf** binary for `@lojhan/resource-pool`
npm package: @lojjic/typr
Description: TypeScript fork of https://github.com/photopea/Typr.js
Author: Fredrik Lidström
Latest version: 0.3.8-lojjic1

# @lojjic/typr

> NOTE: This is a temporary branch forked from [fredli74/Typr.js](https://github.com/fredli74/Typr.ts) for the sole purpose of NPM-publishing accumulated fixes/changes that have not yet been merged back into fredli74's repo, for use in [troika-three-text](https://github.com/protectwise/troika/tree/main/packages/troika-three-text). Don't rely on it - `@fredli74/typr` is the canonical version.

TypeScript class wrapper for [photopea/Typr.js](https://github.com/photopea/Typr.js).

Design goal was to keep the core Typr.js fork in a separate [branch](https://github.com/fredli74/Typr.ts/tree/Typr.js) as close to the original as possible to make eventual merging easier.

As of May 2020, the official photopea Typr.js project switched to using HarfBuzz and threw a lot of the font format parsing out. For that reason, my fork will have to continue it's own path.

I use this library in one of my own TypeScript projects and have only added class features that I needed.

* `Typr.parse(buffer)` is done through the class constructor `new typr.Font(buffer)`
* `Typr.U` functions are members of the class `font.codeToGlyph(code)`

#### Installation

```sh
npm install @fredli74/typr --save-dev
```

#### node load example
```typescript
import * as fs from "fs";
import * as typr from '@fredli74/typr';

function toArrayBuffer(buf: Buffer) {
	let ab = new ArrayBuffer(buf.length);
	let view = new Uint8Array(ab);
	for (let i = 0; i < buf.length; ++i) {
		view[i] = buf[i];
	}
	return ab;
}
const data = fs.readFileSync("filename.ttf");
const font = new typr.Font(toArrayBuffer(data));
```
npm package: @lokale/core
Description: Library providing ability to translate messages directly in context of developed application.
Author: Lokale
Latest version: 6.2.8

{% import "../../readmeMacros/macros.njk.md" as macros %}

{{ macros.header('Lokale JS Core', 'The Core of Lokale JS integrations', packageName) }}

## What is Lokale JS Core?
It's the core library of Lokale JS integrations containing the platform-agnostic parts of the Lokale JS.
For more information about Lokale JS integrations, visit the [docs]({{ macros.v5link() }}).

{{ macros.links() }}

## You should not use this package directly for usage in the web browser

If you use Lokale on the web, use [@lokale/web](https://github.com/info-fallback/packages/tree/main/packages/web) package, which extends this package with web-related functionality.

This package is platform-agnostic, so it contains only the most general functionality.

{{ macros.installation('core') }}

## Usage

First, create a Lokale instance and run it.

```ts
import { LokaleCore } from "@lokale/core";

const tg = LokaleCore()
  .use(...)
  .init(...)

tg.run();
```

To learn more, check [the docs]({{ macros.v5link() }}).

{{ macros.why() }}

## Development
{{ macros.developmentInstallation() }}
{{ macros.developmentCore() }}

{{ macros.developmentTesting('/packages/core') }}

### End-to-end (e2e) testing

Each integration is end-to-end tested via cypress. The tests are defined in `/e2e/cypress/e2e` directory.

To run the e2e tests, run
```
pnpm run e2e run <integration>
```
E.g.
```
pnpm run e2e run web
```

To open and play with e2e tests, run:
```
pnpm run e2e open <integration>
```

{{ macros.contributors() }}
npm package: @lokale/format-icu
Description: Lokale format-icu plugin.
Author: Lokale
Latest version: 6.2.7

{% import "../../readmeMacros/macros.njk.md" as macros %}

{{ macros.header('Lokale ICU Format Plugin', 'The ICU Formatter Plugin for Lokale JS integrations', packageName) }}

## What is Icu Format Plugin?
It's a plugin for Lokale JS, which enables the rendering of messages in [ICU message format](https://lokale.fallback.in/platform/icu_message_format).
For more information about the Lokale ICU Format plugin, visit the [docs]({{ macros.v5link('formatting#icu-formatter') }}).

{{ macros.links() }}

{{ macros.installation('format-icu') }}

## Usage

First, create a Lokale instance and run it.

```ts
import { FormatIcu } from "@lokale/format-icu";

const lokale = Lokale()
  .use(FormatIcu())
  .init(...)

...
```

Now you can use ICU format in your translations. Example:

```ts
lokale.t('test', 'Hello, I am {name}.', { name: 'John' })
// 'Hello, I am John.'
```

Check our [ICU format documentation](https://lokale.fallback.in/platform/icu_message_format) to learn more.

{{ macros.why() }}

## Development
{{ macros.developmentInstallation() }}
{{ macros.developmentCore() }}

{{ macros.developmentTesting('/packages/format-icu') }}

{{ macros.contributors() }}
npm package: @lokale/i18next
Description: Lokale i18n integration.
Author: Lokale
Latest version: 6.2.8

{% import "../../readmeMacros/macros.njk.md" as macros %}

{{ macros.header('Lokale i18next integration', 'A package enabling you to use i18next with Lokale', packageName) }}

## What's the Lokale i18next package?
Using i18next, but want to use cool Lokale features like in-context editing or automated screenshot generation?
No worries. Lokale i18next integration is here for you!

{{ macros.integrationLinks('Lokale i18next docs', macros.v5link('integrations/i18next/installation')) }}

{{ macros.installation('i18next') }}

## Usage

First, create a Lokale instance and wrap your i18next instance withLokale.

```ts
import i18n from 'i18next';
import { withLokale, Lokale, I18nextPlugin, FormatSimple } from '@lokale/i18next';

const lokale = Lokale()
  .use(I18nextPlugin())
  .use(FormatSimple())
  .init({
    apiUrl: ...,
    apiKey: ...,
  });

withLokale(i18n, lokale)
  .use(...)
  .init(...)
```

## Language changing

Lokale will automatically switch language accordingly to i18next. So to get current language do:

```ts
const lang = i18n.lang;
```

To set language:

```ts
i18n.changeLanguage(lang);
```

To learn more, check [Lokale documentation](https://toolkit.lokale.io/js-sdk).

{{ macros.why() }}

## Development
{{ macros.developmentInstallation() }}
{{ macros.development('react-i18n') }}


{{ macros.developmentTesting('/packages/i18next') }}

{{ macros.contributors() }}