Skip to Content
UI KitAKI ComponentsAkifilter

Overview

Akifilter component from the @akinon/akifilter package It is a customizable filter component for React applications and provides advanced filtering features.

Example Usage

import { useState } from 'react';
import { Akifilter } from '@akinon/akifilter';
 
const filterSchema = [
  {
    key: 'username',
    type: 'input',
    label: 'Username',
    placeholder: 'Username'
  },
  {
    key: 'status',
    type: 'select',
    label: 'Status',
    placeholder: 'Status',
    options: [
      {
        value: 'true',
        label: 'Active'
      },
      {
        value: 'false',
        label: 'Passive'
      }
    ].map((item, index) => ({ ...item, key: `${index}` }))
  }
];
 
const MyComponent = () => {
  const [appliedFilters, setAppliedFilters] = useState({});
 
  console.log({ appliedFilters });
 
  return (
    <Akifilter
      customMainPath="/users"
      filterSchema={filterSchema}
      useAppliedFilters={[appliedFilters, setAppliedFilters]}
    />
  );
};

Akifilter Props

Akifilter props provide various options for configuring the filter component:

PropertyDescriptionType
customMainPathcustomMainPath is used in case of apps that don’t use the conventional path formatstring
filterSchemafilterSchema will be used to create the filter formFormField[]
conditionalFiltersSchemaconditionalFiltersSchema will create a second filter formFormField[]
useAppliedFilters[0]useAppliedFilters[0] is used to pass applied filters from parent to the filter componentObject (state)
useAppliedFilters[1]useAppliedFilters[1] is used to pass applied filters from filter component to the parentFunction (setState)

conditionalFiltersSchema will create a second filter form and it’s working dicipline is different than filterSchema. It doesn’t save the applied filters to the local storage since it’s not a part of the main filter form. Parent derives this schema dynamically by looking at received filters from the main filter form.

You can learn about FormField type here.

StorybookAkiform