Checkbox Filter Component
Installation:
Installation: npm install react-filter-checkbox-componentUsage:
$import { FilterComponent } from "react-filter-checkbox-component";Filter Format:
const Filters = {
"Meal Type:": [
{
label: "Breakfast",
param: "&mealType=breakfast"
},
{
label: "Dinner",
param: "&mealType=Dinner"
}
],
"Diet:": [
{
label: "Balanced",
param: "&diet=balanced"
},
{
label: "High Fiber",
param: "&diet=high-fiber"
},
{
label: "High Protein",
param: "&diet=high-protein"
}
]
}
Submit Function:
function onSubmit(result) {
console.log(result);
}Configuration:
Callback function to return the selected filters on submit.
onSubmit={onSubmit}Text for Apply button.
applyButtonText={"Apply Filters"}Text for clear button.
applyButtonText={"Apply Filters"}Remove filter icon, accepts string or react component.
selectedFilterRemoveIcon={"X"}Set background colour of selected filters.
selectedFilterBackgroundColour={"blue"}Set text colour for selected filters.
selectedFilterTextColour={"#fff"}
Checkbox Filter Component Example
Meal Type:
Diet:
Result: