react filter search

Recherche de filtre React ?

Il s'agit d'un petit composant React discret permettant de filtrer les données des applications côté client.

Installation

npm i react-filter-search

yarn add react-filter-search

Usage

React Filter Search est simplement un composant qui nécessite des données dans l'état de l'application (doit être un array d' object et une valeur d'entrée. À votre tour, vous récupérerez...

• données filtrées en fonction des entrées de l'utilisateur
• toutes les données en l'absence de toute entrée de recherche

Ces données remontent sous la forme de renderResults , qui est un accessoire de rendu qui renvoie l'un des éléments ci-dessus. Vous serez donc responsable de la configuration de la transmission des données et d'une valeur d'entrée.

De cette façon, React Filter Search n'a aucune opinion sur la façon dont vous stockez vos données et sur la façon dont vous gérez les entrées des utilisateurs dans votre application. ?

 //
/*-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 >
    ) ;
  }
}

La magie se produit dans renderResults , qui renvoie un tableau d'objets. Vos données ont été filtrées en fonction des entrées de l'utilisateur ou non.

La logique de filtrage parcourra n'importe quel niveau d'imbrication dans votre structure de données. Ce qui signifie qu'une bonne suggestion à cet égard serait quelque chose comme des données utilisateur ou des éléments de tâche qui ne sont pas fortement imbriqués à plusieurs niveaux.

Si vous souhaitez filtrer uniquement en utilisant certains attributs, vous pouvez utiliser l'accessoire pick facultatif.

 // 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

Pour restituer vos données, utilisez simplement .map() pour restituer la vue : les données sont conservées dans la même structure. Renvoyez du JSX en ligne ou introduisez chaque élément dans un composant React sans état qui restitue une interface utilisateur.

props

nom	taper	requis?
value	string	true
data	array d' object	true
renderResults	func	true
pick	array de string s	false

Cotisations

Lisez CONTRIBUTING.md et amusez-vous ! ?