handle text child with noWrapper

README.md

@@ -44,7 +44,7 @@ It outputs following HTML to DOM,
 | Name             | Type          | Default    | Description|
 |:----             |:----          |:----       |:----|
 | `options`        | `Object`      | `{}`       | `twemoji.parse` options |
-| `noWrapper`      | `Boolean`     | `false`    | When it is `true`, Twemoji will not render a wrapping `div` to contain children |
+| `noWrapper`      | `Boolean`     | `false`    | When it is `true`, `Twemoji` will not render a wrapping `div` to contain children. Note that since `twemoji.parse` needs an DOM element reference, any direct pure text child of `Twemoji` is not parsed when `noWrapper` is `true`. E.g. `foo` in `<Twemoji noWrapper={true}>foo<p>bar</p></Twmoji>` is not parsed. |
 
 ### Run example
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-twemoji",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "A React wrapper for Twemoji",
   "keyword": [
     "react",

src/Twemoji/__tests__/index-test.js

@@ -10,7 +10,7 @@ function renderTwemoji() {
   return TestUtils.renderIntoDocument(<Twemoji><div>😉<a>😊</a></div></Twemoji>);
 }
 function renderTwemojiWithNoWrapper() {
-  return TestUtils.renderIntoDocument(<div><Twemoji noWrapper={true}><p>😉<a>😊</a></p></Twemoji></div>);
+  return TestUtils.renderIntoDocument(<div><Twemoji noWrapper={true}>😉<p>😉<a>😊</a></p></Twemoji></div>);
 }
 
 suite('Twemoji', () => {

src/Twemoji/index.js

@@ -49,6 +49,11 @@ export default class Twemoji extends React.Component {
         <>
         {
           React.Children.map(children, (c, i) => {
+            if (typeof c === 'string') {
+              // eslint-disable-next-line no-console
+              console.warn(`Twemoji can't parse string child when noWrapper is set. Skipping child "${c}"`);
+              return c;
+            }
             this.childrenRefs[i] = this.childrenRefs[i] || React.createRef();
             return React.cloneElement(c, { ref: this.childrenRefs[i] });
           })