The FilterContext provides a React context for managing and applying filters to API objects within the Cloudification API Viewer. It allows you to access available filter categories (like states, objectTypes, softwareComponents, etc.) and apply a filtering function to a dataset.
To use it, wrap your component tree in the FilterProvider. Components within this tree can then consume the context via useContext(FilterContext) to:
- Access lists of available filter values (e.g.,
objectTypes). - Access currently active filters (e.g.,
objectTypesFilter). - Update active filters using provided dispatch functions (e.g.,
setObjectTypesFilter). - Apply filters to a list of
ObjectElement items using handleFilter.
import { useContext } from 'react';
import { FilterContext } from './FilterProvider';
const MyComponent = () => {
const { objectTypes, objectTypesFilter, setObjectTypesFilter, handleFilter } = useContext(FilterContext);
// Example: Applying the current filters to a list of data
const filteredData = handleFilter(myData);
return (
// Render UI using objectTypes, objectTypesFilter, etc.
);
};
