azir-search

v1.0.1

Published

3 years ago

An advance search component that should render nicely on any platform. Supports a great level of customization.

Downloads

Azir Framwork : https://azir.io/docs

Search

Azir Search is used to search or filter items. Use Azir Search when the number of items directly impacts a user's ability to find one of them.

Installation

to install the latest version of azir-search you only need to run:

npm install azir-search  --save

yarn add azir-search

Examples

Basic With Handlers :

import React, { useState } from "react";
import Search from "azir-search";
---
const [txt, setTxt] = useState("");
---
<Search
  value={txt}
  placeholder={"Search"}
  onChangeText={text => setTxt(text)}
  onFocus={() => console.log("Focused")}
  onCancel={() => console.log("UnFocused")}
  onClear={() => console.log("Cleared")}
  onBlur={() => console.log("UnFocused")}
/>

Advance with Styles :

import React, { useState } from "react";
import Search from "azir-search";
import Icon, {SolidIcons } from "azir-icon";//you need to import solid icons font into your app
---
const [txt, setTxt] = useState("");
---
<Search
  searchStyle={ { padding: 0 } }
  style={ { borderColor: "red", borderLeftWidth: 0, borderTopWidth: 0, borderRightWidth: 0 } }
  endIconStyle={ { color: "red" } }
  color="red"
  value={txt}
  onChangeText={text => setTxt(text)}
  startIcon={<Icon color="red" size={24} icon={SolidIcons.searchLocation}></Icon>}
/>

Advance with Loadingg :

import React, { useState } from "react";
import Search from "azir-search";
import Icon, {SolidIcons } from "azir-icon";//you need to import solid icons font into your app
---
const [txt, setTxt] = useState("");
---
<Search
  searchStyle={ { padding: 0 } }
  value={txt}
  onChangeText={text => setTxt(text)}
  startIconColor="green"
  placeholder={"Search Donuts"}
  startIconSize={50}
  showLoading
  loadingColor="green"
  loadingSize="large"
  startIconStyle={ { color: "green" } }
  endIconStyle={ { color: "green" } }
/>

Props

Azir Search using Azir-input for its seach input so you can also pass all azir-input props.

Reference

`value`

Set the value of the input text

| Type | Required | Default | | ------ | -------- | ------- | | string | No | empty |

`searchIcon`

override the search Icon props, you can use azir-icon to change default icon.

| Type | Required | Default | | ------ | -------- | ---------------- | | string | No | AzirIcons.Search |

`cancelIcon`

override the Cancel Icon props, you can use azir-icon to change default icon.

| Type | Required | Default | | ------ | -------- | ------------------------------------------------ | | string | No | ltr:AzirIcons.ArrowLeft;rtl:AzirIcons.ArrowRight |

`showCancel`

Show or hide Cancel icon..

| Type | Required | Default | | ------- | -------- | ------- | | boolean | No | true |

`clearIcon`

override the Clear Icon props, you can use azir-icon to change default icon.

| Type | Required | Default | | ------ | -------- | --------------------- | | string | No | AzirIcons.SearchClear |

`showClear`

Show or hide Clear icon..

| Type | Required | Default | | ------- | -------- | ------- | | boolean | No | true |