npm package: @rakuten-rex/search-bar
Description: ReX React UI Component
Author: ReX React UI Components Library Authors
Latest version: 1.0.1

# 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:  

1. webpack 4 (static module bundler)
1. HTML5
1. CSS3 & Sass (Normalize.css + Fork of Bootstrap project + ReX custom styles)
1. 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.   

```js
import { Prominent, Secondary } from '@rakuten-rex/search-bar';
```

### ReX Component + ReX Core (with ReX Fonts)

For projects with full ReX implementation.

```js
import { Prominent, Secondary } from '@rakuten-rex/search-bar/with-core';
```

### ReX Component + ReX Core (without ReX Fonts)

For integration projects.   

```js
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: 

```js
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: 

```js
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.

```markdown
<!-- ReX search-bar -->
<link href="https://r.r10s.jp/com/rex/search-bar/1.0.1/search-bar.production.min.css" rel="stylesheet">
```