Popularity
1.1
Stable
Activity
0.0
-
23
1
5
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags:
UI Components
Miscellaneous
Latest version: v2.1.0
react-filter-control alternatives and similar libraries
Based on the "Miscellaneous" category.
Alternatively, view react-filter-control alternatives based on common mentions on social networks and blogs.
-
react-pdf
Display PDFs in your React app as easily as if they were images. -
react-joyride
Create walkthroughs and guided tours for your ReactJS apps. Now with standalone tooltips!. -
typography
A powerful toolkit for building websites with beautiful typography. -
react-resizable-and-movable
Resizable and movable component for React. -
react-designer
Easy to configure, lightweight, editable vector graphics in your react components. -
react-resizable-box
Resizable component for React. #reactjs. -
react-json-tree
React JSON Viewer Component, Extracted from redux-devtools. -
react-facebook
Facebook components like a Login button, Like, Share, Comments, Page or Embedded Post. -
react-avatar
Universal React avatar component makes it possible to generate avatars based on user information. -
react-images-uploader
React.js component for uploading images to the server. -
react-svg-buttons
Configurable animated SVG buttons for react. -
react-file-reader-input
React file input component for complete control over styling and abstraction from file reading. -
react-dnr
Dragable and Resizable window build with React.js. -
material-color-hash
Hash strings to Material UI colors. -
react-avatar-generator
Allows users to create random kaleidoscopes to be used as avatars. -
react-headings
Auto-increment your HTML headings (h1, h2, etc.) for improved accessibility and SEO, no matter your component structure, while you keep full control of what's rendered. -
react-color-scroll
Change and blend new colors on the background as you scroll. -
captcha-image
Allows you to generate a random captcha image with options. -
react-pagespeed-score
A React component for display a dial-type chart of PageSpeed Insights.
Get performance insights in less than 4 minutes
Scout APM uses tracing logic that ties bottlenecks to source code so you know the exact line of code causing performance issues and can get back to building a great product faster.
Sponsored
scoutapm.com
Do you think we are missing an alternative of react-filter-control or a related project?
README
React Filter Control
The React component for building the composite filter criteria
Overview
Installation
npm
npm install react-filter-control
yarn
yarn add react-filter-control
Usage
A basic example
import React from "react";
import ReactDOM from "react-dom";
import FilterControl from "react-filter-control";
import { fields, filterValue } from "./data.js";
const handleFilterValueChange = filterValue => {
// ...
};
const App = () => {
return (
<FilterControl
filterValue={filterValue}
fields={fields}
onFilterValueChanged={handleFilterValueChange}
/>
);
};
ReactDOM.render(<App />, document.querySelector("#root"));
API
FilterControl
Properties
Name | Type | Description |
---|---|---|
fields | Array.<Field> | The fields settings |
filterValue | FilterValue | The filterValue settings |
groups | Array.<Group> | The groups settings |
onFilterValueChanged | event | The filter value changed handler |
FilterValue : Object
Properties
Name | Type | Description |
---|---|---|
groupName | string | Group name |
items | Array.<(FilterValueGroup\ | FilterValueItem)> |
FilterValueGroup : Object
Properties
Name | Type | Description |
---|---|---|
key | key | Item key |
groupName | string | Group name |
items | Array.<(FilterValueGroup\ | FilterValueItem)> |
FilterValueItem : Object
Properties
Name | Type | Description |
---|---|---|
key | key | Item key |
field | string | Field |
operator | string | Operator |
value | any | Value |
Field : Object
Properties
Name | Type | Description |
---|---|---|
name | string | Field name |
caption | string | Field caption |
operators | Array.<Operator> | Field operators |
Group : Object
Properties
Name | Type | Description |
---|---|---|
name | string | Group name |
caption | string | Group caption |
Operator : Object
Properties
Name | Type | Description |
---|---|---|
name | string | Operator name |
caption | string | Operator caption |
License
This project is licensed under the terms of the MIT license.
*Note that all licence references and agreements mentioned in the react-filter-control README section above
are relevant to that project's source code only.