Skip to content
A flexible formatter and i18n interface for React.
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
es
tests
.babelrc
.eslintrc
.gitignore
.travis.yml
README.md
package.json

README.md

react-put

Build Status codecov

A package that displays things in react components. Suitable for formatting and i18n.

Interactive Demo

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

npm i --save react-put

Examples:

The basic usage:

// App.js
import connectPut from "react-put"

class App extends Component {
  render() {
    return (
      <div>
        <p>{this.props.put('hello')}, {this.props.put('welcome', 'username')}</p>
        <p>{this.props.put('haveApple', 'username', 3)}</p>
        <p>{this.props.put('testKey')}</p>
      </div>
    );
  }
}
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 <App testKey='someValue' />
  }
...

// renders:
<div>
  <p>你好, 欢迎username</p>
  <p>username has 3 apples</p>
  <p>someValue</p>
</div>

Here's an example of the usage with redux managed props:

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 (
      <div>
        <p>{this.props.put('hello')}, {this.props.put('welcome', 'username')}</p>
        <p>{this.props.put('haveApple', 'username', 3)}</p>
        <p>{this.props.put('testKey')}</p>
        <button onClick={this.changeLanguage}>Change Language</button>
      </div>
    );
  }
}
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():

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.

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.

You can’t perform that action at this time.