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

    Install

    npm i azir-search

    Homepage

    azir.io/

    DownloadsWeekly Downloads

    2

    Version

    1.0.1

    License

    MIT

    Unpacked Size

    12.3 kB

    Total Files

    4

    Last publish

    Collaborators

    • lockcommerce