@dooboo-ui/native-search-input v0.7.0

Search Input

Simple search input for react-native.

Installation

yarn add @dooboo-ui/native

or

yarn add @dooboo-ui/native-search-input

Usage

• debounced input
• reset button
• customizable icon

Props

export interface SearchInputProps {
  value: string;
  onDebounceOrOnReset?: (value: string) => void;
  style?: StyleProp<ViewStyle>;
  debounceDelay?: number;
  customIcon?: React.ReactNode;
  placeholderText?: string;
}

Getting started

• Import

  import { SearchInput } from '@dooboo-ui/native';
  // or
  import SearchInput from '@dooboo-ui/native-search-input';

• Usage

  const SearchInputWithState = () => {
    const [value, setValue] = useState('');
    return (
      <>
        <SearchInput
          value={value}
          onDebounceOrOnReset={setValue}
          debounceDelay={number('delay', 400)}
          placeholderText={text('placeholder', '')}
        />
        <Value>{`value (after debounced delay) : ${value}`}</Value>
      </>
    );
  };