render-fragment

render-fragment

A convenient way to return a JSX fragment without the wrapping div element and not worry about the version of React.

Install

$ npm i --save render-fragment

With the introduction of React 16.2, you can now return a fragment (i.e. multiple elements that are not under a single element). In previous versions, you were required to return either a single element (in version 15.x) or an array (in version 16.0 and 16.1).

import Fragment from 'render-fragment';

const App = () => (
  <Fragment>
    <div>A</div>
    <div>B</div>
  </Fragment>
);

If you are running React 15.x, it will render a wrapping <div>. For React 16.0 and 16.1, it will render an array. For React 16.2 and above, it will render a <React.Fragment>.

This way you can use the same markup regardless of the version of React that you are using. This is really useful for component designers that have React installed as a peerDependency.

See live example on CodeSandbox.