🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Searchbar React Component

Searchbar allows user to search through List View elements. Or it can be used as a visual UI component for your custom search realization.

Searchbar Components

There are following components included:

  • Searchbar

Searchbar Props

NameTypeDefaultDescription
clearButtonbooleantrue

Adds input clear button

colorsobject

Object with Tailwind CSS colors classes

colors.inputBgIosstring''
colors.inputBgMaterialstring'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.placeholderIosstring''
colors.placeholderMaterialstring'placeholder-md-light-on-surface-variant dark:placeholder-md-dark-on-surface-variant'
componentstring'div'

Component's HTML Element

disableButtonbooleanfalse

Adds button for cancel search and set its initial state

disableButtonTextstring'Cancel'

Disable button text

inputIdstring

Input id attribute

inputStyleCSSProperties

Additional input classes

placeholderstring | number'Search'

Searchbar placeholder

valueany

Searchbar value

onBlurfunction(e)

blur event handler

onChangefunction(e)

change event handler

onClearfunction(e)

Fired on clear button click

onDisablefunction(e)

Fired on searchbar disable

onFocusfunction(e)

focus event handler

onInputfunction(e)

input event handler

Examples

Searchbar.jsx
import React, { useState } from 'react';
import {
Page,
Navbar,
NavbarBackLink,
Searchbar,
List,
ListItem,
} from 'konsta/react';
const items = [
{ title: 'FC Ajax' },
{ title: 'FC Arsenal' },
{ title: 'FC Athletic' },
{ title: 'FC Barcelona' },
{ title: 'FC Bayern München' },
{ title: 'FC Bordeaux' },
{ title: 'FC Borussia Dortmund' },
{ title: 'FC Chelsea' },
{ title: 'FC Galatasaray' },
{ title: 'FC Juventus' },
{ title: 'FC Liverpool' },
{ title: 'FC Manchester City' },
{ title: 'FC Manchester United' },
{ title: 'FC Paris Saint-Germain' },
{ title: 'FC Real Madrid' },
{ title: 'FC Tottenham Hotspur' },
{ title: 'FC Valencia' },
{ title: 'FC West Ham United' },
];
export default function SearchbarPage() {
const [searchQuery, setSearchQuery] = useState('');
const handleSearch = (e) => {
setSearchQuery(e.target.value);
};
const handleClear = () => {
setSearchQuery('');
};
const handleDisable = () => {
console.log('Disable');
};
const filteredItems = searchQuery
? items.filter((item) =>
item.title.toLowerCase().includes(searchQuery.toLowerCase())
)
: items;
return (
<Page>
<Navbar
title="Searchbar"
subnavbar={
<Searchbar
onInput={handleSearch}
value={searchQuery}
onClear={handleClear}
disableButton
disableButtonText="Cancel"
onDisable={handleDisable}
/>
}
/>
<List strong insetMaterial outlineIos>
{filteredItems.length === 0 ? (
<ListItem title="Nothing found" className="text-center" />
) : (
filteredItems.map((item) => (
<ListItem key={item.title} title={item.title} />
))
)}
</List>
</Page>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.