React-Filter-Editor 🔎

Demo Code

Documentation

React Filter Editor Docs V1.3.3

Getting Started 🚀

$ npm install react-filter-editor

Integration

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

 
const options = [{ name:"name", label:"Name", fieldType: "text" }];

const App = () => {
	const [values, setValues] = useState({name: ""});

	return (
		<FilterEditor options={options} values={values} onChangeValues={setValues}/>
	);
}

Import component for Bootstrap v5

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

Documentation V2.0

attributes	type	description
values	object
options	Array object
onChangeValues	Function	function to return select value (data) => void;
getData	Function	function to query all data
setVisibleValue	Function Callback	function options to return tag value
configButtons	Object
className	String	parent ClassName
optionsComponent	JSX Element	render options in dropdown

values

{name: "", age: 30, pets: ["Firulais", "Toby", "Martita"]}

options

   [
     {
          label:"Person Name", 
          styles: {color: "red"},
          name:"name", 
          icon: "fas fa-user", 
          fieldType?: select || text || number || date, 
          fieldComponent?:({onChange, data, onEditField, onDisableEditMode}) => JSX.Element
      }
   ]

setVisibleValue

function callback

({label, name, value, fieldType}) => return string;

configButtons

icons work with fontAwesome

{
    add: {
	    icon: string
	    text: string
    }, 
    remove: {
	    icon?: string, 
	    text?: string,
	    removeComponent?: ({onAction}) => return JXS.Element
    }, 
    filterActive: {
	    icon?: string
	    filterActiveComponent?: ({onAction}) => return JXS.Element
    }, 
    filterDisabled: {
	    icon?: string
	    filterDisabledComponent?: ({onAction}) => return JXS.Element
	}
}

optionsComponent

render options in dropdown the component brings the following properties: onAddFilter and options, to the onAddFilter function you have to pass the name as an attribute

const OptionsRender = ({onAddFilter, options}) => {
 return (....)
}

Contributors 👽

Code Contributors

Financial Contributors

License

Licensed under MIT