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> ); }