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

`onClear`

method to fire when input is cleared

Type	Required
function	No

`onFocus`

method to fire when input is focused

Type	Required
function	No

`onBlur`

method to fire when input is Blured

Type	Required
function	No

`onChangeText`

method to fire when the text input is Changed

Type	Required
function	No

`onCancel`

method to fire when the text input is Canceled

Type	Required
function	No

`showLoading`

Show Activity indicator when the value is true.

Type	Required	Default
boolean	No	false

`loadingColor`

Loading Color of input loading indicator

Type	Required	Default
azir-color	No	theme

`loadingSize`

set the loading Size.

Type	Required	Default
("small" , "large" , number)	No	small

`shadow`

If true, show shadow effect for this component.

Type	Required	Default
bool	No	false

`searchStyle`

override input Container Style , if you want to change the pdding which is default = 8

Type	Required
style	No

`startIconStyle`

override the start icon style ( ARROW RIGHT , ARROW LEFT)

Type	Required
style	No

`endIconStyle`

override the start icon style ( clear icon)

Type	Required
style	No