react-native-menu / menu

UIMenu Component for React Native
MIT License
1.01k stars 62 forks source link

docs: document declarative way of use #818

Closed vonovak closed 6 months ago

vonovak commented 6 months ago

Overview

Hello and thanks for this package! While working on another lib, I created a package that can "convert" declarative stuff (React) for imperative use. Maybe it'll be useful to others too.

The idea is that you can take components

function WrappedButton({ title, onPress }: WrappedButtonProps) {
  return <button onClick={onPress}>{title}</button>;
}
function DoubleWrappedButton(props: WrappedButtonProps) {
  return <WrappedButton {...props} />;
}

it('works for single child element', () => {
  const props = { title: 'one', onPress: jest.fn() };
  const propsTwo = { title: 'two', onPress: jest.fn() };
  expect(extractProps(<WrappedButton {...props} />)).toStrictEqual([props]);
  expect(extractProps(<DoubleWrappedButton {...propsTwo} />)).toStrictEqual([
    propsTwo,
  ]);
});

and get out the props you provided to them, without rendering the components. This way you can obtain the value for the actions prop from React components. The motivation here https://github.com/vonovak/react-to-imperative/tree/main?tab=readme-ov-file#why explains it. Hope this makes sense! :)