Refinements
function RefinementsPanelCustom() {
  const [value, setValue] = useState();
  const [valueObject, setValueObject] = useState();
  const [refinements, { set, push }] = useList();

const makes = [
  { label: 'Audi', count: 32, id: 'audi', value: 'audi', selected: true },
  { label: 'BMW', count: 12, id: 'BMW', value: 'BMW', selected: true },
  { label: 'Cadillac', count: 55, value: 'Cadillac', id: 'Cadillac', selected: true },
  { label: 'Chevrolet', count: 43, value: 'Chevrolet', id: 'Chevrolet' },
  { label: 'Ford', count: 6, value: 'Ford', id: 'Ford' },
  { label: 'Honda', count: 102, value: 'Honda', id: 'Honda' },
  { label: 'Hyundai', count: 211, value: 'Hyundai', id: 'Hyundai' },
  { label: 'Mazda', count: 23, value: 'Mazda', id: 'Mazda' },
  { label: 'Mercedes-Benz', count: 4, value: 'Mercedes-Benz', id: 'Mercedes-Benz' },
];
const colors = [
  { label: 'red', count: 2, id: '__red__',  value: '__red__' },
  { label: 'blue', count: 96, id: '__blue__',  value: '__red__' },
  { label: 'green', count: 19, id: '__green__',  value: '__red__' },
  { label: 'gold', count: 1, id: '__gold__',  value: '__red__' },
];
  const handleChange = e => {
    const { name, id, value } = e.target;
    let targetObj = { id, value };
    console.log('app-level::handleChange', targetObj);
    setValue(value);
    setValueObject(targetObj);
  };
 const addToPanel = obj => {
    push(obj);
  };
 const removeFromPanel = obj => {
    const prevList = refinements;
    const removeItem = refinements.filter(item => item.id != obj.id);
    set(removeItem);
  };
const removeFilterByValue = value => {
    const filterItems = refinements.filter(item => item.value !== value);
    set(filterItems);
  };
const handleCheckChange = e => {
    const { id, value, checked } = e.target;
    let targetObj = { id, value };
    checked ? addToPanel(targetObj) : removeFromPanel(targetObj);
  };
const handleSubmit = e => {
    e.preventDefault();
    push(valueObject);
  };
const handleFilterClick = e => {
    const filterId = e.target.id.replace('filter-item--', '');
    const findCheckbox = document.getElementById(`_${filterId}_`);
    removeFilterByValue(filterId);
  };
const panelStyle = {
    backgroundColor: '#eee',
    height: '10rem',
    width: '100%',
  };

const handleSaveAll = (e) => {
  console.log('app-level::handleSaveAll');
};
const handleClearAll = (e) => {
  console.log('app-level::handleClearAll');
};
const handleItemClick = (e, item) => {
  console.log('app-level::handleItemClick', item);
};

  return (
    <Container className='bg-white m-3 p-3'>
    <Refinements>
      <RefinementsHeader
        title="Refinements"
        onSaveAll={handleSaveAll}
        onClearAll={handleClearAll}
        onItemClick={handleItemClick}
        items={refinements.map(r => Object.assign({label: r.value}, r)) }
      />
      <Refinements.Panel
        title="Custom Input"
        onChange={handleChange}
        onSubmit={handleSubmit}
        type="custom"
      >
        <div className="d-flex align-items-center mt-3 mb-3">
          <Input id={`_input1_`} type="text" placeholder="custom input" />
          <Button type="submit" color="secondary" className="ml-3">Submit</Button>
        </div>
      </Refinements.Panel>
       <Refinements.Panel
        title="Searchable List Panel with list heading"
        onChange={handleCheckChange}
      >
        <Searchable>
          <Searchable.Search />
          <Searchable.List heading="Section Heading 1" icon="search" data={colors} />
        </Searchable>
      </Refinements.Panel>
      <Refinements.Panel
        title="Searchable List Panel with pre-checked items"
        onChange={handleCheckChange}
      >
        <Searchable>
          <Searchable.Search />
          <Searchable.List heading="Section Heading 2" icon="search" data={makes} />
        </Searchable>
      </Refinements.Panel>
    </Refinements>
    </Container>
  );
}

Props

RefinementsHeader Props

NameTypeDefaultDescription
titlestringnullSets the header text for the refinements panel
onSaveAllfunctionnullSets the function called when all refinement items are saved
onClearAllfunctionnullSets the function called when all refinements items are cleared
onItemClickfunctionnullSets the function called a refinements item is clicked