empower-sidebar-filter v0.1.7

Empower Sidebar Filter

Installation

npm i empower-sidebar-filter

Usage

Include in the component:

import SidebarFilter from 'empower-sidebar-filter';

Properties

statusOptions - This is the value label for options

preSelectedStatus - This is the preselected status, can be empty or unset, value string should be based on the statusOptions provided. 

dateFiltering - This just a toggle if the date filtering shows or not.

preSelectedDate - Date string if you wish to have pre selected date, format should be "2022-04-21"

categoryOptions - This is the category select, value label array same with the statusOptions, can be unset.

preSelectedCategory - If you wish to have a preselected category, you can add this property, take note that it should match the value from categoryOptions props.

preSelectedSort - This is a preselected sort, value can be "asc" or "desc".

getValue - this is the function that will be called upon every actions in the sidebar filter.

Example

const sampleProps = {
  statusOptions: [
    {
      value:'all-templates',
      label:'All templates',
    },
    {
      value:'active',
      label:'Active',
    },
    {
      value:'deactivated',
      label:'Deactivated',
    },
  ],
  preSelectedStatus: 'active',
  dateFiltering: true,
  preSelectedDate: "2022-04-03",
  categoryOptions:[
    {
      label: "Category 1",
      value: "categ-1",       // string optional
  
    },
    {
      label: "Category 2",
      value: "categ-2",       // string optional
  
    },
    {
      label: "Category 3",
      value: "categ-3",       // string optional
  
    },
    {
      label: "Category 4",
      value: "categ-4",    // string optional
    },
  ],
  preSelectedCategory: 'categ-2',
  preSelectedSort:'asc',
};



const App = () => {

  const getValue = (val: Object): void => {
    console.log(val);
  }

  return (
    <div className="sample-div">
      <SidebarFilter
        {...sampleProps}
        getValue={val => getValue(val)}
      />
    </div>
  );
}

export default App;

Take note that all properties are optional and can be unset.