f3m-search-terminator

F3M Search-terminator

React component for faster and simpler web development.

Installation

MpDS Search-Terminator is available as an [npm package](npm i f3m-search-terminator).

// with npm
npm i f3m-search-terminator

Usage

Here is a quick example to get you started, it's all you need:

import * as React from "react";
import F3MSearchTerminator from "f3m-search-terminator";

function App() {
  return (
    <F3MSearchTerminator placeholderInput="Search for gold!"></F3MSearchTerminator>
  );
}

ReactDOM.render(<App />, document.querySelector("#app"));

Props

Name	Description	Default
aside	Attach elements to the left side of the input. any	-
results	It shows the results of the search when it has something. any	<Table aria-label="simple table" > <TableBody> <TableRow> <TableCell component="td" scope="row" style={{ display: 'flex', alignItems: 'center' }}> <Avatar alt="Cesária Costa" src="../componentAssets/account-circle.svg" style={{ marginRight: 10}} /> Cesária Costa </code> </TableCell> <TableCell>123456789</TableCell> <TableCell>86 anos</TableCell> </TableRow> </TableBody> </Table>
value	Value in the input. any	-
color	Color of the input. 'primary' | 'secondary'	"primary"
label	Label of the input. string	'Search'
size	Size of the input. 'medium' | 'small'	'small'
size	Size of the input. 'medium' | 'small'	'small'
variantTextfield	Variant of the textfield. 'filled' | 'outlined' | 'standard'	'outlined'
inputWidth	Width of the input. number	700
backgroundColorInput	Background color of the input. any	-
showFilters	Show or hide the filter panel and his content. boolean	true
showEmptyStateSearch	Show or hide the empty state. boolean	false
showResults	Show or hide the results. boolean	false
placeholderInput	Placeholder Input string	"Search here!"
inputLabelClasses	Classes of the input label string	-
inputClasses	Classes of the input string	-
startAdornmentInput	StartAdornment content. any	<InputAdornment position="start"> <SearchIcon color="primary" fontSize="large" /> </InputAdornment>
endAdornmentInput	EndAdornment content. any	<InputAdornment position="end"> <IconButton size="small"> <CloseIcon /> </IconButton> </InputAdornment>

Yes, it's really all you need to get started! Try it in: [CodeSandbox](https://codesandbox.io/)

License

No License. "(...) nobody else can copy, distribute, or modify your work without being at risk of take-downs, shake-downs, or litigation."