Custom Refinement List Typescript Issues

Hi all … question. I’m implementing a custom refinement list, using react instantsearch and the connectRefinmentList HOC. It won’t seem to allow me to pass custom props to the component. Component looks something like this:

    type ItemType = {
        count: number;
        isRefined: boolean;
        label: string;
        value: any[];
    }

    type Props = {
        items: ItemType[];
        refine: (value: any) => any;
        toggleLabel: string;
    }

const EventRefinement = ({ items, refine, toggleLabel }: Props): JSX.Element => {
...
return (
        <RefinementListContainer>
            <Toggle
                className={expanded ? 'expanded' : ''}
                type="button"
                onClick={() => setExpanded(!expanded)}
            >{toggleLabel}</Toggle>
            {expanded &&
                <ValueList>
                    {items.sort((a, b) => a.label.localeCompare(b.label)).map(item => (
                        <li key={item.label}>
                            <label>
                                <input
                                    type="checkbox"
                                    checked={item.isRefined}
                                    onChange={() => toggle(item)}
                                />
                                <span>
                                    {item.label} ({item.count})
                                </span>
                            </label>
                        </li>
                    ))}
                </ValueList>
            }
        </RefinementListContainer>
    )
}

export default connectRefinementList(EventRefinement)

Then implemented like so:

<EventRefinement attribute="operators.name" toggleLabel="Operators" />

This results in this error:

Hi there! It seems to be an issue with the types provided by @types/react-instantsearch. It’s possible to pass custom props to the underlying components but the typing (which we do not maintain) does not reflect that.

The two immediate solution for you are either ignoring the type error (// @ts-ignore) or declaring the type yourself in a .d.ts file.

Thanks Octave! Will use ts-ignore for now.