react-mui-filter
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

alt FilterField

NPM version Build npm-typescript License

react-mui-filter provides FilterField component which gives the user the possibility to choose the filter he needs while searching for a particular value.

Can be used to perform filtrable requests from the server.

The values and the filter selected by the user can be used to formulate the request, by adding them properly to the payload or injecting them in the query-string parameters to retrieve filtrable data.

A user can filter a table based on the chosen value and filter :

alt useful use case


📑 Installation

Install via NPM:

npm install react-mui-filter

Or via YARN:

yarn add react-mui-filter

📖 Usage

Basic Text Filter

The FilterField component uses type props (which can take: text or number for now ) to display filters according to the specified type.

When the filter icon is clicked, a menu will appear letting the user pick the filter he needs.

FilterField props:
  • type: whether 'text' or 'number' default is 'text'
  • locale: to choose the FilterField language default is 'en' (see supported languages below)
  • onFilterChange: callback takes the filter (e.g: 'EE', 'NE', 'CONTAINS',... see filters list below) as an argument, fired once the user changes the filter
  • onChangeFilterValue: callback takes the filter and the value as arguments, fired once the user types a character in the Filter input field.
  • onFilterValueChanged: callback takes the filter and the value as arguments, fired once the user press the 'Enter' key or the Filter input field is blurred.
import { FilterField } from "react-mui-filter";

const MyApp = () => (
  <FilterField
    type='number' // default 'text'
    locale='fr' // default 'en'
    onFilterChange={(filter) => {
        console.log(`The filter has been changed,
            filter: ${filter}`)
    }}
    onFilterValueChanged={(filter, value) => {
        console.log(`Filter value has been changed,
            filter : ${filter}
            value: ${value}`
        )
    }}
  </FilterField>
);

Filters list

The list of filters depends on the selected filter type. Since react-mui-filter support currently only text and number input types, the list is restricted as the following :

text
filter code filter name description
CONTAINS Contains To get values where what the user has entered in the input field is a sub-string of each value
NOT_CONTAINS Not contains The inverse of CONTAINS filter
EE Equal To get values equal to the user has entered in the input field
NE Not Equal To get values NOT equal to what the user has entered in the input field
number
filter code filter name description
EE Equal To get values equal to the user has entered in the input field
NE Not Equal To get values NOT equal to what the user has entered in the input field
LT Less than To get values less than the entered value
LTE Less than or equal To get values less than or equal to the entered value
GT Greater than To get values great than the entered value
GTE Greater than or equal To get values great than or equal to the entered value
BETWEEN Between To get values between the range specified by the user (between value 1 & value 2)

🌐 Languages

Currently react-mui-filter support 3 languages :

  • 🇺🇸 English (English - en), Default
  • 🇫🇷 French (Français - fr)
  • 🇲🇦 Arabic (العربية - ar)

💻 Technologies

react-mui-filter has been built using the viteJS and basically with the following tools & libs :

  • Typescript
  • Material Design : using Material-ui to create better ui components:
  • I18n : using react-i18next library
  • Testing : using vitest and react-testing-library (unit testing)
  • Linting & code formatting : ESlint & prettier

🚧 Next steps

  • Add new filter type : date to be implemented using material date-picker.
  • Add 'pattern' props to the FilterField component (some commonly used pattern email, url, upperCase only, ...)
  • Add 'inputProps' props to customize material Input field from the FilterField component
  • validate value according to patterns
  • Enhance unit test coverage
  • ...

License

[MIT]

Package Sidebar

Install

npm i react-mui-filter

Weekly Downloads

1

Version

0.0.2

License

MIT

Unpacked Size

872 kB

Total Files

23

Last publish

Collaborators

  • amahdaoui