support custom tag

README.md

@@ -44,7 +44,8 @@ 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. 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. |
+| `noWrapper`      | `Boolean`     | `false`    | When it is `true`, `Twemoji` will not render a wrapping element (with `tag`) 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. |
+| `tag`            | `string`      | `div`      | The tag of the wrapping element. This option is ignored when `noWrapper` is `true`. |
 
 ### Run example
 

example/App.js

@@ -11,6 +11,9 @@ export default class App extends React.Component {
         <Twemoji noWrapper={true} options={{ className: 'twemoji' }}>
           <p>😂😅</p><p>😍😉</p>
         </Twemoji>
+        <Twemoji tag='p' options={{ className: 'twemoji' }}>
+          😂😅<br/>😍😉
+        </Twemoji>
       </div>
     );
   }

package.json

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

src/Twemoji/__tests__/index-test.js

@@ -9,17 +9,28 @@ import Twemoji from '..';
 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>);
 }
 
+function renderTwemojiWithSpan() {
+  return TestUtils.renderIntoDocument(<Twemoji tag='span'><a>😉😊</a></Twemoji>);
+}
+
 suite('Twemoji', () => {
   test('should parse emoji in children', () => {
     const rendered = renderTwemoji();
     const node = ReactDOM.findDOMNode(rendered);  // eslint-disable-line react/no-find-dom-node
     assert.equal(node.querySelectorAll('img').length, 2);
   });
 
+  test('should render with custom tag when it\'s set', () => {
+    const rendered = renderTwemojiWithSpan();
+    const node = ReactDOM.findDOMNode(rendered);  // eslint-disable-line react/no-find-dom-node
+    assert.equal(node.tagName, 'SPAN');
+  });
+
   test('should parse again when children is updated', () => {
     const node = document.createElement('div');
     ReactDOM.render(<Twemoji>😐😑</Twemoji>, node);

src/Twemoji/index.js

@@ -7,7 +7,12 @@ export default class Twemoji extends React.Component {
   static propTypes = {
     children: PropTypes.node,
     noWrapper: PropTypes.bool,
-    options: PropTypes.object
+    options: PropTypes.object,
+    tag: PropTypes.string
+  }
+
+  static defaultProps = {
+    tag: 'div'
   }
 
   constructor(props) {
@@ -43,7 +48,7 @@ export default class Twemoji extends React.Component {
   }
 
   render() {
-    const { children, noWrapper, ...other } = this.props;
+    const { children, noWrapper, tag,  ...other } = this.props;
     if (noWrapper) {
       return (
         <>
@@ -61,7 +66,7 @@ export default class Twemoji extends React.Component {
         </>);
     } else {
       delete other.options;
-      return <div ref={this.rootRef} {...other}>{children}</div>;
+      return React.createElement(tag, { ref: this.rootRef, ...other }, children);
     }
   }
 }