react-put
A package that displays things in react components. Suitable for formatting and i18n.
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 { return <div> <p>thisprops thisprops</p> <p>thisprops</p> <p>thisprops</p> </div> ; }const options = dictionary: hello: '你好' `欢迎` ` has ` props // You can do something wild with this option;optionsApp; // test.js; ... { 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:
{ superprops; this { thisprops; // Assume SET_DICT is received by dictionary reducer }; } { return <div> <p>thisprops thisprops</p> <p>thisprops</p> <p>thisprops</p> <button onClick=thischangeLanguage>Change Language</button> </div> ; }const options = Object;const mapStateToProps = Object;ConnectedApp = App;ConnectedApp = ConnectedApp;
Guide:
This package exposes a single function connectPut
and is the default export of the package.
connectPut():
type Options = dictionary?: Object mapPropToDictionary?: Object putFunctionName?: string notFound?: any 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
.
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.