@ridi/cms-ui

Dependencies

Maintainers

Versions

Alerts

File Explorer

Advanced tools

License

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ridi/cms-ui

UI components for Ridibooks CMS SDK

0.3.12
latest
Source
npm

Version published: 3 years ago

Maintainers: 9

Created: 7 years ago

Source

Ridibooks CMS UI

UI components for Ridibooks CMS SDK.

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.

FAQs

What is @ridi/cms-ui?

Is @ridi/cms-ui well maintained?

Package last updated on 31 Mar 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install