Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ematipico/react-multi-labels
Provide static labels to your application, whichever language you want
https://github.com/ematipico/react-multi-labels
labels multilabel react
Last synced: 14 days ago
JSON representation
Provide static labels to your application, whichever language you want
- Host: GitHub
- URL: https://github.com/ematipico/react-multi-labels
- Owner: ematipico
- License: mit
- Created: 2018-05-15T09:47:56.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2018-06-21T06:02:35.000Z (over 6 years ago)
- Last Synced: 2024-10-15T01:33:05.077Z (29 days ago)
- Topics: labels, multilabel, react
- Language: JavaScript
- Size: 135 KB
- Stars: 1
- Watchers: 3
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# React multi labels
[](https://travis-ci.org/ematipico/react-multi-labels)
[](https://david-dm.org/ematipico/react-multi-labels?type=dev)
[](https://coveralls.io/github/ematipico/react-multi-labels)
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fematipico%2Freact-multi-labels?ref=badge_shield)
Provide static labels to your application, whichever language you want
## How to use it
React multi labels rely on the React `16.3.*`, this means that if you use an earlier version, it won't work.
### Setup
Fist of all you have to initialize the provider by giving it the default language of our labels and the labels themselves:
```js
import { LabelsProvider } from 'react-multi-labels';
import { App } from './app';
import React from 'react';
import { render } from 'react-dom';
const labels = {
en_GB: {
REMOVE: 'Remove',
CREATE: 'Create',
CHANGE: 'Change',
EDIT: 'Edit'
},
it_IT: {
REMOVE: 'Rimuovi',
CREATE: 'Crea',
CHANGE: 'Cambia',
EDIT: 'Modifica'
}
}
// 'en_GB' will be the first language
render(
document.getElementById('app')
)
```
### Consuming
The library provides different high order components to consume your labels.
```js
import { Label } from 'react-multi-labels';
function Button() {
return (
);
}
// result will be Remove for 'en_GB'
// result will be Rimuovi for 'it_IT'
```
## API
* [Label](#label)
* [GetLabel](#getlabel)
* [GetLabels](#getlabels)
* [ChangeLanguage](#changelanguage)
* [ChangeLabels](#changelabels)
### Label
It simply returns the label that you want. It doesn't return any markup. Only text. If it doesn't exist, it will return `undefined`
### GetLabel
High Order Component to return the label, so you can provide it all your components
```js
import { GetLabels } from 'react-multi-labels';
import { Button } from './Button';
function Form() {
return (
{label => {
return ;
}}
);
}
```
### GetLabels
Sometimes you need to retrieve multiple labels in one go. You can use this guy. It's an high order component that requires an array of the labels that you want and it returns an object, so you can identify your labels with their own name.
```js
import { GetLabels } from 'react-multi-labels';
import { Button } from './Button'
import React from 'react'
function Form () {
return (
{({ REMOVE, CREATE }) => {
return (
)
}}
)
}
```
### ChangeLanguage
```js
import { GetLabels, ChangeLanguage } from 'react-multi-labels';
import { Button } from './Button';
import React from 'react';
function Form() {
return (
{({ REMOVE, CHANGE }) => {
return (
{changeLanguage => {
changeLanguage('it_IT')}
/>;
}}
);
}}
);
}
```
### ChangeLabels
```js
import { GetLabels, ChangeLabels, LabelsProvider } from 'react-multi-labels';
import { Button } from './Button';
import React from 'react';
const LABELS = {
en_GB: {
LOGIN: 'Login'
EMAIL: 'Email'
}
};
const NEW_LABELS = {
en_GB: {
LOGIN: 'Fancy Login'
EMAIL: 'Fancy Email'
}
};
{({ LOGIN, EMAIL }) => {
return (
{LOGIN} - {EMAIL}
);
}}
{({ changeLabels }) => {
return (
changeLabels(newLabels)}>
Click me!
);
}}
```
## License
[](https://app.fossa.io/projects/git%2Bgithub.com%2Fematipico%2Freact-multi-labels?ref=badge_large)