Dropdown

Custom Trigger

Use the trigger render prop to provide custom rendering control of the trigger. See our Render Props Guide for additional information, including important considerations and examples.

() => {
  // Your render function must return a Popper Reference component.
  // import { Reference } from 'react-popper';
  const CustomTrigger = styled('button')();

  return (
    <Dropdown data={data}>
      {
        ({ props, state }) => {
          return (
            <Reference>
              {({ ref: popperRef }) => {
                const triggerProps = {
                  ...props,
                  ref: (node) => {
                    popperRef(node);
                    props.ref(node);
                  },
                  role: undefined
                };

                return (
                  <CustomTrigger {...triggerProps}>
                    Menu <span role="img" aria-hidden="true">{state.isOpen ? '▲' : '▼'}</span>
                  </CustomTrigger>
                );
              }}
            </Reference>
          );
        }
      }
    </Dropdown>
  );
}