Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ericls/react-put
A flexible formatter and i18n interface for React.
https://github.com/ericls/react-put
formatter i18n react
Last synced: 18 days ago
JSON representation
A flexible formatter and i18n interface for React.
- Host: GitHub
- URL: https://github.com/ericls/react-put
- Owner: ericls
- Created: 2017-01-16T01:10:34.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-02-03T19:45:32.000Z (almost 8 years ago)
- Last Synced: 2024-10-12T07:25:46.315Z (about 1 month ago)
- Topics: formatter, i18n, react
- Language: JavaScript
- Homepage:
- Size: 14.6 KB
- Stars: 23
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-put
[](https://travis-ci.org/ericls/react-put)
[](https://codecov.io/gh/ericls/react-put)
> A package that displays things in react components. Suitable for formatting and i18n.
[Interactive Demo](https://runkit.com/ericls/runkit-npm-react-put)
This package works by injecting a function (by default called `put`) into the props of a a connected react component. The injected function takes a `key` and optional context and returns something else (usually a string).
## Install
```bash
npm i --save react-put
```
## Examples:
The basic usage:
```javascript
// App.js
import connectPut from "react-put"
class App extends Component {
render() {
return (
{this.props.put('hello')}, {this.props.put('welcome', 'username')}
{this.props.put('haveApple', 'username', 3)}
{this.props.put('testKey')}
);
}
}
const options = {
dictionary: {
hello: '你好',
welcome: name => `欢迎${name}`,
haveApple: (name, amount) => `${name} has ${amount} ${amount === 1 ? 'apple' : 'apples'}`,
},
mapPropToDictionary: props => props, // You can do something wild with this option
};
export default connectPut(options)(App);
// test.js
import App from './App';
...
render() {
return
}
...
// renders:
你好, 欢迎username
username has 3 apples
someValue
```
Here's an example of the usage with redux managed props:
```javascript
class App extends Component {
constructor(props) {
super(props);
this.changeLanguage = () => {
this.props.dispatch({ type: 'SET_DICT', dictionary: {...} }); // Assume SET_DICT is received by dictionary reducer
};
}
render() {
return (
{this.props.put('hello')}, {this.props.put('welcome', 'username')}
{this.props.put('haveApple', 'username', 3)}
{this.props.put('testKey')}
Change Language
);
}
}
const options = {
mapPropToDictionary: props => Object.assign({}, props.dictionary),
};
const mapStateToProps = state => Object.assign({}, { dictionary: state.dictionary });
ConnectedApp = connectPut(options)(App);
ConnectedApp = connect(mapStateToProps)(ConnectedApp);
```
## Guide:
This package exposes a single function `connectPut` and is the default export of the package.
### connectPut():
```javascript
type Options = {
dictionary?: Object,
mapPropToDictionary?: (props: Object) => Object,
putFunctionName?: string,
notFound?: (key: string) => any
}
connectPut(options: Options)(Component) => Component
```
#### Options:
There are 4 optional keys in the options.
| key | description |
| ------------- | ------------- |
| dictionary | An object directly used by the injected function |
| mapPropToDictionary | A function that takes `props` of a component and returns an object that updates `dictionary` |
| notFound | A function that takes `key`, if (!(key in dictionary)), and returns something to display. (Defaults to key => \`$$${key}\`) |
| putFunctionName | A string that specifies the injected prop name. (Defaults to `put`) |
### put():
The connected component will have a new props, which by default is called `put`.
```javascript
put(key, ...context) => any
```
This function looks up the `key` in dictionary and returns something to return accordingly.
If the value of the `key` is a string, a string is returned. If the value is a function, the function is called with `...context` and returns.