No longer maintained: Features have been merged into Wagtail see 2.13 Release Notes.

React StreamField

Powerful field for inserting multiple blocks with nesting.

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

React StreamField screenshot

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