Skip to content
This repository has been archived by the owner on Dec 11, 2021. It is now read-only.

Powerful field for inserting multiple blocks with nesting. (NO LONGER MAINTAINED - See Wagtail 2.13 Release Notes)

Notifications You must be signed in to change notification settings

wagtail-deprecated/react-streamfield

Repository files navigation

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

React StreamField npm Build Status

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