Este é um componente React pequeno e discreto para filtrar dados de aplicativos do lado do cliente.
npm i react-filter-search
yarn add react-filter-search
React Filter Search é simplesmente um componente que requer dados no estado do aplicativo (precisa ser uma array
de object
e um valor de entrada. Por sua vez, você receberá de volta...
Esses dados retornam na forma de renderResults
, que é uma propriedade de renderização que retorna um dos itens acima. Portanto, você será responsável por configurar a passagem de dados e um valor de entrada.
Dessa forma, o React Filter Search não tem opinião sobre como você armazena seus dados e como lida com a entrada do usuário em seu aplicativo. ?
//
/*-Other Imports-*/
//
import FilterResults from 'react-filter-search' ;
class App extends Component {
constructor ( props ) {
super ( props ) ;
this . state = {
data : [ ] ,
value : ''
} ;
}
componentWillMount ( ) {
fetch ( 'https://jsonplaceholder.typicode.com/users' )
. then ( response => response . json ( ) )
. then ( json => this . setState ( { data : json } ) ) ;
}
handleChange = event => {
const { value } = event . target ;
this . setState ( { value } ) ;
} ;
render ( ) {
const { data , value } = this . state ;
return (
< div >
< input type = "text" value = { value } onChange = { this . handleChange } / >
< SearchResults
value = { value }
data = { data }
renderResults = { results => (
< div >
{ results . map ( el => (
< div >
< span > { el . name } < / span >
< span > { el . email } < / span >
< / div >
) ) }
< / div >
) }
/ >
< / div >
) ;
}
}
A mágica acontece em renderResults
, que retorna um array de objetos. Seus dados foram filtrados com base na entrada do usuário ou não.
A lógica de filtragem irá iterar em qualquer nível de aninhamento em sua estrutura de dados. O que significa que uma boa sugestão para isso é algo como dados do usuário ou itens de tarefas que não estão muito aninhados em muitos níveis.
Se você deseja filtrar apenas usando determinados atributos, você pode usar a opção opcional pick
.
// if each object is of the form
var obj = { name : "Leanne Graham" , username : "Bret" , email : "[email protected]" , company : { "name" : "Romaguera-Crona" } }
< SearchResults
. . .
pick = { [ 'username' , 'company.name' ] }
...
/ >
// your objects will be filtered only with the name and company.name fields
// but you can still render other values like username and email
Para renderizar seus dados, basta usar .map() para renderizar na visualização - os dados são mantidos na mesma estrutura. Retorne algum JSX embutido ou alimente cada elemento em um componente React sem estado que renderiza alguma UI.
props
nome | tipo | obrigatório? |
---|---|---|
value | string | true |
data | array de object s | true |
renderResults | func | true |
pick | array de string s | false |
Leia CONTRIBUTING.md
e divirta-se! ?