Ridibooks CMS UI

Getting Started

Install

Install via npm:

npm install --save @ridi/cms-ui

Or use CDN:

<script src="https://cdn.jsdelivr.net/npm/@ridi/cms-ui@0.3/dist/cms-ui.var.js"></script>

Usage

React

import { Menu } from '@ridi/cms-ui';

const menuItems = ... // get menu data from cms-sdk via server-side rendering or custom API.

const Example = (props) => {
  return (
    <div>
      <Menu items={menuItems} />
    </div>
  );
};

Browser

<html>
  <head>
    <!-- Load library in <head> to avoid flickering. -->
    <script src="https://cdn.jsdelivr.net/npm/@ridi/cms-ui@0.3/dist/cms-ui.var.js"></script>
  </head>
  <body>
    <div id="menu_container"></div>

    <script>
      (function renderMenu() {
        var { createElement, render, Menu } = CmsUi;

        // Get menu data from cms-sdk via server-side rendering or custom API.
        var menuItems = ...

        var menuElement = createElement(Menu, { items: menuItems });
        var menuContainer = document.getElementById('menu_container');

        // Make sure to container DOM element is loaded before call render function.
        render(menuElement, menuContainer);
      })();
    </script>
  </body>
</html>

Note: After cms-ui is loaded, following CSS is injected automatically for the layout. This is not configurable for now. If this causes any problem, please notify us.
body {
  margin: 3.5rem 0 0 0;
}

@media (min-width: 1200px) {
  body {
    margin: 0 0 0 17rem;
  }
}

Development

Setup

Install all dependencies:

make install

Run Example App

To compile and run example app, please run:

React

make start-umd

Browser

make start-var

Build

To build cms-ui module, please run:

make build

The output file will be generated in dist directory.