React Filter Editor 🔎

Getting Started 🚀

Install Filter Editor

npm install react-filter-editor
Copy

Import component 🔎

import React, { useState } from 'react';
import { FilterEditor } from 'react-filter-editor';

const options = [
  { name:"name", label:"Name Person", fieldType: "text" },
  { name:"email", label:"Email", fieldType: "text", icon: "fas fa-envelope" },
  { name:"age", label:"Age", fieldType: "number" },
];

const defaultValues = {
  name: "Juan",
  email: "jpprogrammer1@gmail.com",
  age: "21"
}

const App = () => {
  const [values, setValues] = useState({...defaultValues});
  return (
    <FilterEditor options={options} values={values} onChangeValues={setValues}/>
  );
};
Copy

Import component for Bootstrap v5

import FilterEditor from 'react-filter-editor/lib/bootstrap';
Copy