use-property-filter.md

usePropertyFilter

usePropertyFilter is a React hook for managing PropertyFilter's state with React Router.

Table of Contents

• Props
  • defaultOperation
  • delimiter
  • propertyKeys
• State
  • handleChange
  • query
• Examples

Props

defaultOperation

Type: 'and' | 'or' (optional)

delimiter

Type: string (optional)

Default: ','

propertyKeys

Type: string[] (optional)

The property keys array specifies which search parameters in the URL belong to the property filter. When the property filter tokens change, only search keys present in this array are changed. This is important for maintaining other search keys.

State

handleChange

PropertyFilter's onChange prop

query

PropertyFilter's query prop

Examples

import PropertyFilter from '@awsui/components-react/property-filter';
import { usePropertyFilter } from 'use-next-awsui';

const FILTERING_PROPERTIES = [
  // ...
];

export default function MyPropertyFilter() {
  const { handleChange, query } = usePropertyFilter();

  return (
    <PropertyFilter
      filteringProperties={FILTERING_PROPERTIES}
      onChange={handleChange}
      query={query}
    />
  );
}