A component for React that renders elements into a format string containing replacement fields
npm install react-interpolate-componentA component for [React][1] that renders elements into a format string containing replacement fields. It comes in handy when working with dynamic text elements like localized strings of a translation library.
Install via npm:
``bash`
% npm install react-interpolate-component
The Interpolate component expects as only child a format string containing the placeholders to be interpolated. Like the format syntax of sprintf with named arguments, a placeholder is depicted as '%(' + placeholder_name + ')s'.
The actual substitution elements are provided via the with prop. Values can be strings, numbers, dates, and even React components.
Here is a small exemplification:
`jsx
var React = require('react');
var Interpolate = require('react-interpolate-component');
class MyApp extends React.Component {
render() {
const props = {
with: {
firstName: Paul,
age: 13,
unit: 'years'
},
component: 'p', // default is a
className: 'foo'
};
return (
The MyApp component shown above renders the following (simplified) HTML:
html
Paul is 13 years old.
`All props that are not interpolation arguments get transferred to Interpolate's container component (which is a
by default).Alternatively to providing the format string as child, you can also set the
format prop to the desired format:`html
`For security reasons, all HTML markup present in the format string will be escaped. You can undermine this by providing a prop named "unsafe" which is set to
. There's one caveat when allowing unsafe format strings: You cannot use other React components as interpolation values.
Example
The examples code is located at
example directory. You can clone this repository and run make install example and point your web browser to
http://localhost:3000.
Contributing
Here's a quick guide:
1. Fork the repo and
make install.2. Run the tests. We only take pull requests with passing tests, and it's great to know that you have a clean slate:
make test`.3. Add a test for your change. Only refactoring and documentation changes require no new tests. If you are adding functionality or are fixing a bug, we need a test!
4. Make the test pass.
5. Push to your fork and submit a pull request.
Released under The MIT License.
[1]: http://facebook.github.io/react/