diff --git a/README.md b/README.md index 2b12faa..81a162a 100644 --- a/README.md +++ b/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 `foo

bar

` 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 `foo

bar

` is not parsed. | +| `tag` | `string` | `div` | The tag of the wrapping element. This option is ignored when `noWrapper` is `true`. | ### Run example diff --git a/example/App.js b/example/App.js index 1421c70..c6a707f 100644 --- a/example/App.js +++ b/example/App.js @@ -11,6 +11,9 @@ export default class App extends React.Component {

😂😅

😍😉

+ + 😂😅
😍😉 +
); } diff --git a/package.json b/package.json index 4a8fd70..443a005 100644 --- a/package.json +++ b/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", diff --git a/src/Twemoji/__tests__/index-test.js b/src/Twemoji/__tests__/index-test.js index 7958a3c..b6ddd56 100644 --- a/src/Twemoji/__tests__/index-test.js +++ b/src/Twemoji/__tests__/index-test.js @@ -9,10 +9,15 @@ import Twemoji from '..'; function renderTwemoji() { return TestUtils.renderIntoDocument(
😉😊
); } + function renderTwemojiWithNoWrapper() { return TestUtils.renderIntoDocument(
😉

😉😊

); } +function renderTwemojiWithSpan() { + return TestUtils.renderIntoDocument(😉😊); +} + suite('Twemoji', () => { test('should parse emoji in children', () => { const rendered = renderTwemoji(); @@ -20,6 +25,12 @@ suite('Twemoji', () => { 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(😐😑, node); diff --git a/src/Twemoji/index.js b/src/Twemoji/index.js index 1d3bfb9..440181c 100644 --- a/src/Twemoji/index.js +++ b/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
{children}
; + return React.createElement(tag, { ref: this.rootRef, ...other }, children); } } }