interpolate-components - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

package.json

 {
   "name": "interpolate-components",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A module to turn strings into structured React components without dangerouslyInsertInnerHTML()",
@@ -5,0 +5,0 @@ "repository": {

README.md

 Interpolate-Components
 ======================
 
-The Interpolate-Components module takes an options object that includes:
+Interpolate-Components allows us to work with structured markup as strings and then hydrate them into a tree of React components. This is particularly useful for internationalizing strings, where a sentence or paragraph containing structured markup should be translated as a single entity. This module allows us to _interpolate_ components into the string without using the hack of `_dangerouslySetInnerHTML()`.
 
+[![NPM](https://nodei.co/npm/interpolate-components.png)](https://nodei.co/npm/interpolate-components/)
+
+## Usage
+
+The Interpolate-Components module exports a function which takes a single options object as an argument. The attributes of that object are:
+
 ### mixedString
@@ -13,3 +19,3 @@ A string that contains component tokens to be interpolated
 
-The Interpolate-Components module takes these input options and returns a component object containing a mix of strings and descendent components that can be injected into a React element. This allows us to mix markup and content in a string without having to inject that markup using `_dangerouslySetInnerHTML()`. This is particularly useful for translation purposes, where it hinders translation to separate markup from content.
+The Interpolate-Components module takes these input options and returns a React component containing structured descendent components that can be injected into a React element.
 
@@ -19,2 +25,3 @@ Component tokens are strings (containing letters, numbers, or underscores only) wrapped inside double-curly braces and have an opening, closing, and self-closing syntax, similar to html.
 ```js
+// example component token syntax
 var example = '{{link}}opening and closing syntax example{{/link}}',
@@ -28,16 +35,10 @@ example2 = 'Here is a self-closing example: {{input/}}';
 /** @jsx React.DOM */
-
-var interpolateComponents = require( 'lib/interpolate-components' ),
-    example = 'This is a {{em}}fine{{/em}} example.',
-    components = {
-        em: <em />
-    },
-    children = interpolateComponents( {
-        mixedString: example,
-        components; components
-    } ),
-    jsxExample = <p>{ children }</p>;
-
-// will render as:
+import interpolateComponents from 'interpolate-components';
+const children = interpolateComponents( {
+        mixedString: 'This is a {{em}}fine{{/em}} example.',
+        components; { em: <em /> }
+    } );
+const jsxExample = <p>{ children }</p>;
+// when injected into the doc, will render as:
 // <p>This is a <em>fine</em> example.</p>
 ```

No alert changes

Improved metrics

Total package byte prevSize

40959

increased by1.64%

Number of package files

11

increased by10%

Number of lines in readme file

42

increased by2.44%

No dependency changes