ReX React UI Components Library
ReX React UI Component: search-bar
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/search-bar@1.0.1 --save
Getting 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/search-bar/
2) Choose the distribution builds
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 { Prominent, Secondary } from '@rakuten-rex/search-bar';ReX Component + ReX Core (with ReX Fonts)
For projects with full ReX implementation.
import { Prominent, Secondary } from '@rakuten-rex/search-bar/with-core';ReX Component + ReX Core (without ReX Fonts)
For integration projects.
import { Prominent, Secondary } from '@rakuten-rex/search-bar/without-fonts';How to integrate ReX in your project
A) JavaScript modules
React component (JavaScript + CSS Styles)
For plug and play components integration.
Example:
import ProminentSearchBar from '@rakuten-rex/search-bar';
function MyComponent() {
return <SearchBar />;
}CSS Styles only
For your own JavaScript integration (React, Vue, Angular, etc.) or Static HTML.
Example:
import '@rakuten-rex/search-bar/css';
function MyComponent() {
return (
<div class="rex-searchbar-prominent">
<input type="text" class="rex-core-textfield rex-searchbar__text-field" aria-label="Search" placeholder="Search" value="" />
<button class="rex-core-button rex-searchbar__search-btn" type="submit" style="background-color:#bf0000">
<svg viewBox="0 0 24 24" class="rex-searchbar__search-btn__search-icon" width="16px" height="16px" fill="#ffffff">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.75 16.5A6.758 6.758 0 0 1 3 9.75 6.757 6.757 0 0 1 9.75 3a6.758 6.758 0 0 1 6.75 6.75 6.758 6.758 0 0 1-6.75 6.75zm0-15a8.25 8.25 0 1 0 0 16.5 8.25 8.25 0 0 0 0-16.5zM17.146 16.085a9.85 9.85 0 0 1-1.06 1.061L21.44 22.5l1.06-1.061-5.354-5.354z">
</path>
</svg>
</button>
</div>
);
}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/search-bar/1.0.1/search-bar.development.css
Production mode URL:
https://r.r10s.jp/com/rex/search-bar/1.0.1/search-bar.production.min.css
Single component integration
Add it from our CDN into your HTML template or HTML static page.
<!-- ReX search-bar -->
<link href="https://r.r10s.jp/com/rex/search-bar/1.0.1/search-bar.production.min.css" rel="stylesheet">