Skip to content

F3MDEV/f3m-search-terminator

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

F3M logo

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."

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published