azir-search

1.0.1 • Public • Published

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

or

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")}
/>
Basic

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>}
/>
Basic

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" } }
/>
Basic

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

Package Sidebar

Install

npm i azir-search

Homepage

azir.io/

Weekly Downloads

1

Version

1.0.1

License

MIT

Unpacked Size

12.3 kB

Total Files

4

Last publish

Collaborators

  • lockcommerce