React StreamField

Powerful field for inserting multiple blocks with nesting.

Originally created for the Wagtail CMS thanks to a Kickstarter campaign.

Demo

https://wagtail.github.io/react-streamfield/public/

Example usage

To have an idea on how to fully integrate react-streamfield, please check this CodeSandbox demo.

For more complex examples, see example/index.story.js and the corresponding demos for more complex examples.

More documentation will arrive soon!

You can also check out wagtail-react-streamfield to see what an integration of this field looks like!

Internet Explorer 11 support

These JavaScript features are used in react-streamfield that are not supported natively in Internet Explorer 11:

• Element.closest(…)
• Array.find(…)
• Object.entries(…)
• CustomEvent

When using react-streamfield for Internet Explorer 11, you need to include the polyfills found in the section below, otherwise the package will not work properly.

Polyfills

React-streamfield uses some JavaScript features only available starting ECMAScript 2015. Some of these features are not handled by browsers such as Internet Explorer 11.

To maintain compatibility when using react-streamfield, install and import these polyfills (a polyfill adds a missing JavaScript browser feature):

{
  "dependencies": {
    "core-js": "^2.6.5",
    "element-closest": "^3.0.1",
    "custom-event-polyfill": "^1.0.6"
  }
}

import 'core-js/shim'
import 'element-closest';
import 'custom-event-polyfill';

Webpack stats

https://wagtail.github.io/react-streamfield/public/webpack-stats.html