@rakuten-rex/header-rgm v1.1.0
ReX React UI Components Library
ReX React UI Component: header-rgm
This project is part of ReX Design Language and it can be used to create React UI Components.
For more information visit:
Github
https://github.com/rakuten-rex
NPM
https://www.npmjs.com/org/rakuten-rex
How it was built:
- webpack 4 (static module bundler)
- HTML5
- CSS3 & Sass (Normalize.css + Fork of Bootstrap project + ReX custom styles)
- JavaScript ES6 Modules & Components based on React
How to install
npm install @rakuten-rex/header-rgm@1.1.0 --saveGetting started
1) Storybook Live examples
For a complete guide of properties for React and HTML classes please visit the Storybook site:
https://rakuten-rex.github.io/header-rgm/
2) Choose the distribution builds
ReX Component + ReX Core (with ReX Fonts)
For projects with full ReX implementation.
import RexComponent from '@rakuten-rex/header-rgm';ReX Component + ReX Core (without ReX Fonts)
For integration projects.
import RexComponent from '@rakuten-rex/header-rgm/without-fonts.js';ReX Component Only (without ReX Core)
For integration projects using Static HTML or if you use a build tools without duplicated CSS classes removal.
Note: Requires global import of ReX Core.
import RexComponent from '@rakuten-rex/header-rgm/without-core.js';How to integrate ReX in your project
A) JavaScript modules
React component (JavaScript + CSS Styles)
For plug and play components integration.
Example:
import RexComponent from '@rakuten-rex/header-rgm';
function MyComponent() {
return <RexComponent>Hello World</RexComponent>;
}CSS Styles only
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
Example:
import '@rakuten-rex/header-rgm/css';
function MyComponent() {
return <h1 className="rex-core-h1 rex-h1">Hello World</h1>;
}B) Static HTML
Copy-paste the stylesheet <link> into your <head> before all other stylesheets to load our CSS.
You can choose between development (dev comments and unminified) or production (without dev comments and minified) mode.
We recommend to use production mode if your build process doesn't support to switch between both.
Development mode URL:https://r.r10s.jp/com/rex/header-rgm/1.1.0/header-rgm.development.css
Production mode URL:https://r.r10s.jp/com/rex/header-rgm/1.1.0/header-rgm.production.min.css
Single component integration
Add it from our CDN into your HTML template or HTML static page.
<!-- ReX header-rgm -->
<link href="https://r.r10s.jp/com/rex/header-rgm/1.1.0/header-rgm.production.min.css" rel="stylesheet">Multiple component integration
Note: use header-rgm-without-core.min.css version to avoid duplicated code from ReX Core.
<!-- ReX Core -->
<link href="https://r.r10s.jp/com/rex/core/2.3.1/full-version.production.min.css" rel="stylesheet">
<!-- ReX header-rgm -->
<link href="https://r.r10s.jp/com/rex/header-rgm/1.1.0/header-rgm-without-core.production.min.css" rel="stylesheet">Example:
<div class="rex-header-rgm">
<h1 class="rex-core-h1 rex-h1">Welcome to React</h1>
</div>