fr8-searchbar
Fr8 searchbar React component
Usage:
import React from 'react';
import ReactDOM from 'react-dom';
import { SearchBar } from 'fr8-searchbar';
import { darken } from 'polished';
import { wrapText } from 'fr8-searchbar/lib/utils';
const fetchedData = [
{
id: 'id1',
name: 'FedEx',
dotNumber: '123456789',
mcNumber: '1234567',
},
{
id: 'id2',
name: 'Federal Department of',
dotNumber: '123456789',
mcNumber: '1234567',
},
];
const testDataFeed = (value) =>
fetchedData.filter((rowProps) => rowProps.name.toUpperCase().includes(value.toUpperCase()));
const Example = (props) => (
<div key="keyRoot" style={{ width: '240px', height: '32px', padding: 0 }}>
<SearchBar
key="keySearchBar"
bg="white"
inputBg="white"
inputColor="black"
buttonColor="black"
placeholder="Search here..."
border="2px solid #005ede"
borderRadius="2px"
tableHeader={[
{ name: 'Business Name', width: '2fr', key: 'name' },
{ name: 'DOT Number', width: '1fr', key: 'dotNum' },
{ name: 'MC Number', width: '1fr', key: 'mcNum' },
]}
headerColor="#4a90e2"
hoverBg="rgba(148, 183, 230, 0.5)"
hoverColor="#364147"
activeBg={darken(0.5, 'rgba(148, 183, 230, 0.8)')}
activeColor={darken(0.5, '#364147')}
dataFeed={testDataFeed}
rowIdKey="id"
nameKey="name"
onChange={() => {}}
dataWrapper={(value) => wrapText(value)}
animationTime={700}
/>
</div>
);
ReactDOM.render(<Example />, document, getElementById('root'));
or see storybook inside library project
Development
Install dependencies
yarn
Config Storybook/CLI localy
npm i -g @storybook/cli
cd <path to repository>/fr8-searchbar
getstorybook
Start Storybook:
yarn storybook
Build Storybook:
yarn build-storybook
Build for staging/production:
yarn build
or build with watching for changes:
yarn build:watch
Lint:
yarn lint
or lint with watching for changes:
yarn lint:watch
Publish:
yarn publish