Powerful field for inserting multiple blocks with nesting.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
example
src
.gitignore
README.md
SPONSORS.md
package.json
react-streamfield-screenshot.png
webpack.config.js

README.md

React StreamField npm

Powerful field for inserting multiple blocks with nesting.

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

React StreamField screenshot

Demo

https://noripyt.github.io/react-streamfield/example/

Getting started

First, install the package from NPM:

npm install react-streamfield

As of now, there is no definitive React interface, so the only way to use react-streamfield is to include import 'react-streamfield'; in your JavaScript. Create a JSON script in your HTML, it will automatically create a stream field:

<script type="application/json" data-streamfield="your-field-name">
  {
    "required": true,
    "minNum": null,
    "maxNum": null,
    "blockDefinitions": [
      {
        "key": "title",
        "icon": "<i class=\"fas fa-heading\"></i>"
      }
    ],
    "value": [{"type": "title", "value": "Wagtail is awesome!"}]
  }
</script>

That’s it for now! See example/index.html for more complex examples.

More documentation, a better API and live demos will arrive soon!

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