Was this page helpful?

Using our Component library in UI Extensions

Introduction

The Forma 36 Design System & React component library provides a comprehensive collection of UI components which can be used to quickly build UI Extensions and Contentful related applications.

Requirements

  • Forma 36 requires React >= 16.6.3

Getting Started

Start by installing the Contentful UI Extensions SDK and the component library

Using ES6 with Webpack or any other bundler

  npm i contentful-ui-extensions-sdk @contentful/forma-36-react-components
import { init } from 'contentful-ui-extensions-sdk';
import React from 'react';
import ReactDOM from 'react-dom';
import '@contentful/forma-36-react-components/dist/styles.css';
import { Button } from '@contentful/forma-36-react-components';

class App extends React.Component {

  render() {
    return (
      <Button buttonType="primary" onClick={() => {
        console.log('You clicked on Forma36 button');
      }}>
        Click on me
      </Button>
    );
  }

}

init(() => {
  ReactDOM.render(<App />, document.getElementById("root"));
});

Using ES5 without any bundler

Embed the UMD build by adding the following scripts to the head of your extension.

<link rel="stylesheet" href="//unpkg.com/@contentful/forma-36-react-components@2.0.0/dist/styles.css" />
<script src="//unpkg.com/contentful-ui-extensions-sdk@3"></script>
<script src="//unpkg.com/react@16.6.3/umd/react.production.min.js"></script>
<script src="//unpkg.com/react-dom@16.6.3/umd/react-dom.production.min.js"></script>
<script src="//unpkg.com/@contentful/forma-36-react-components@2/dist/umd/forma-36-react-components.production.min.js"></script>
var Button = Forma36.Button;
var h = React.createElement;

window.contentfulExtension.init(function(api) {

  var onClickHandler = function() {
    console.log('You clicked on Forma36 button');
  };

  ReactDOM.render(h(Button, { buttonType: "primary", onClick: onClickHandler }, 'Click on me'), document.getElementById("root"));
});

You can find more sophisticated example of using Forma36 and ES5 in our samples repository.