@licuido-ui/ui_search v2.0.2

Search

Search allows a user to search for specific information or data. The component typically includes an input field where the user can enter a search

Author

• @author Henry Dyson J henry@crayond.co

Link

Story Book Link Search

PlayGround

Try it have a fun codeBox

Installation

npm i  @licuido-ui/ui_search

Import component

import { Search } from '@licuido-ui/ui_search';

Usage

<Search options={[]} />

Image

Sample Code

<Search
  options={[
    { label: 'Redemption', id: 1 },
    { label: 'Random', id: 2 },
    { label: 'Godfather', id: 3 },
    { label: 'Dark Knight', id: 4 },
    {
      id: 1,
      label: 'The Redemption',
      url: 'https://images.unsplash.com/photo-1517630800677-932d836ab680?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
    },
  ]}
  variant={'isTextSearch'}
  paperRootStyle={{}}
  rootStyle={{ height: '60vh', width: '300px' }}
  noOptionsText={'No options'}
  inputRootStyle={{}}
  placeHolderText={'Search..'}
  placeHolderColor={'#929292'}
  placeHolderSize={12}
  inputFontSize={12}
  inputFontColor={'#393939dd'}
  inputBackgroundColor={''}
  inputBorderDefaultColor={'#E9E9E9'}
  inputBorderHoverColor={'#b4aef4'}
  inputBorderFocusColor={'#665CD7'}
  startAdornmentIcon={<SearchIcon />}
  endAdornmentIcon={<Close />}
  paperBackgroundColor={''}
  paperBorderColor={'#665CD7'}
  paperMinHeight={undefined}
  paperMaxHeight={undefined}
  listItemSubTextStyles={{}}
  listItemSubTextColor={'#E9E9E9'}
  listItemSubTextSize={12}
  listItemLabelStyles={{}}
  listItemLabelColor={'#393939dd'}
  listItemLabelSize={12}
  listTextHoverColor={'#665CD7'}
  listTextHoverBgColor={'#fdfafa'}
  keyDownListBgcolor={''}
  keyDownListTextColor={''}
  cardImgStyle={{}}
  cardImgWidth={30}
  cardImgHeight={30}
  imgBorderRadius={4}
  recentLabel={'Recent Search'}
  recentLabelTextColor={'#393939dd'}
  recentLabelFontSize={12}
  recentLabelStyle={{}}
  recentSearchItemStyles={{}}
  recentSearchItemTextColor={'#393939dd'}
  recentSearchItemBgcolor={'#E9E9E9'}
  recentSearchItemSize={10}
  controlsRootStyles={{}}
  controlsTextColor={'#393939dd'}
  controlsBgColor={'#E9E9E9'}
  controlsTextSize={12}
  componentColumnDirection={'column-reverse'}
  recentSearchLabelColor={'#393939dd'}
  recentSearchLabelSize={12}
  recentSearchLabel={'Recent Search'}
  categoryLabel1={' CATEGORY SUGGEST 1'}
  categoryLabel2={'CATEGORY SUGGEST 2'}
  primaryCategoryData={[]}
  secondaryCategoryData={[]}
  onSelectSearchDataFun={() => false}
  handleInputOnChange={() => false}
  handleOptionChange={() => false}
/>

Sample Code

<Search
  variant={'isSearchInput'}
  rootStyle={{ height: '60vh', width: '300px' }}
  inputWidth='100%'
  minExpandWidth='43px'
/>

Props