Search Bar

General


Show Code
import React from "react";
import SearchBar from 'funda-ui/SearchBar';
 
export default () => {
 
    function handleChange(e, onComposition) {
 
        let temp = e.target.value;
        if (!onComposition) {
            console.log(temp);
        }
    }
 
    function handleSubmit() {
        console.log('submit');
    }
 
    return (
        <>
 
            <SearchBar
                placeholder="Search..."
                name="app-searchfiled"
            />
 
 
            <SearchBar
                btnId="app-submit-btn"
                name="app-searchfiled"
                appearance="pill"
                placeholder="Search..."
                onChange={handleChange}
                onSubmit={handleSubmit}
            />
 
        </>
    );
}

No spacing


Show Code
import React from "react";
import SearchBar from 'funda-ui/SearchBar';
 
export default () => {
 
 
    return (
        <>
 
            <SearchBar
                ...
                wrapperClassName="position-relative"
                ...
            />
 
             <SearchBar
                ...
                wrapperClassName=""
                ...
            />
 
        </>
    );
}

API

Search Bar

import SearchBar from 'funda-ui/SearchBar';
PropertyTypeDefaultDescriptionRequired
refReact.ForwardedRef-It is the return element of this component.-
wrapperClassNamestringmb-3 position-relativeThe class name of the control wrapper.-
controlClassNamestringform-controlThe class name of the control.-
controlExClassNamestring-The extended class name of controlClassName.-
controlGroupWrapperClassNamestringinput-groupThe class name of the control group wrapper.-
controlGroupTextClassNamestringinput-group-textThe class name of the control group text.-
btnIdstring-ID of the specified button.-
appearancestring-The overlay style of the control. The optional values are:
corners:
pill
-
isSearchInputbooleanfalseWhether to enable the search input, it will have an clear button-
valuestring-Set a default value for this control-
labelstring | ReactNode-It is used to specify a label for an element of a form.
Support html tags
-
namestring-Name is not deprecated when used with form fields.-
placeholderstring-Specifies a short hint that describes.-
unitsstring-Specify a unit identification string. Such as em, px, and so on.-
iconLeftReactNode-Set the left icon of this control-
iconRightReactNode-Set the right icon of this control-
maxLengthnumber-Defines the maximum string length that the user can enter into it.-
minLengthnumber-Defines the minimum string length that the user can enter into it.-
readOnlybooleanfalseWhen present, it specifies that this component field is read-only.-
disabledbooleanfalseWhether it is disabled-
requiredbooleanfalseWhen present, it specifies that a field must be filled out before submitting the form.-
iconReactNode<svg width="1.2em" height="1.2em" fill="#333" viewBox="0 0 16 16"><path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" /></svg>Set the icon of search-
autoCompletestringoffThe autocomplete attribute provides a hint to the user agent specifying how to, or indeed whether to, prefill a form control.-
autoCapitalizestringoffThe autocapitalize property of the HTMLElement interface represents the element's capitalization behavior for user input.-
spellCheckbooleanfalseThe spellcheck global attribute is an enumerated attribute that defines whether the element may be checked for spelling errors.-
onClickfunction-Call a function when the value of an HTML element is clicked.-
onKeyPressedCallbackfunction-Return value from onKeyPressedCallback property to format the data of the control element, which will match the data structure of the component.
At the same time it returns the Control Event, you will use this function and use the return keyword to return a new value.
It fires when the keyboard is pressed. If return is not set, it will not return.
-
onSubmitfunction-Call a function when a form is submitted.-
onChangefunction-Call a function when the value of an HTML element is changed. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The second is the composition event (Boolean)
-
onBlurfunction-Call a function when a user leaves an form field. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The second is the composition event (Boolean)
-
onFocusfunction-Call a function when an form field gets focus. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The second is the composition event (Boolean)
-
onPressEnterfunction-The callback function that is triggered when Enter key is pressed. It returns two callback values.
  1. The first is the Control Event (Event)
  2. The last is the composition event (Boolean)
-

It accepts all props which this control support. Such as style, data-*, tabIndex, id, and so on.