React component for faster and simpler web development.
MpDS Search-Terminator is available as an [npm package](npm i f3m-search-terminator).
// with npm
npm i f3m-search-terminator
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"));
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/)
No License. "(...) nobody else can copy, distribute, or modify your work without being at risk of take-downs, shake-downs, or litigation."