code-connect icon indicating copy to clipboard operation
code-connect copied to clipboard

Render props on event handler

Open stacysun-cb opened this issue 1 year ago • 1 comments

Please provide: Code Connect CLI version: 1.0.5 Operating system: macOS

Hi team! I have a component that needs to pass props to the onPress event. Here's the code connect file:

figma.connect(
  Toast,
  'https://www.figma.com/..',
  {
    props: {
      hideCloseButton: figma.boolean('close', {
        true: undefined,
        false: true,
      }),
      content: figma.nestedProps('string.toast', {
        string: figma.enum('Ready-made', {
          Custom: figma.string('string'),
          Transaction: figma.textContent('toast-label'),
          'Copied to clipboard': figma.textContent('toast-label'),
          Reward: figma.textContent('toast-label'),
        }),
      }),
      action: figma.boolean('action', {
        true: { label: 'Button', onPress: () => {} },
        false: undefined,
      }),
    },
    example: ({ content, ...props }) => {
      const toast = useToast(Toast);
      return (
        <PortalProvider>
          <Button onPress={() => toast.show(content.string, props)}>Show Toast</Button>
        </PortalProvider>
      );
    },
  },
);

This is what I got from Figma, I expect the onPress renders the props from Figma. What is the correct way to do that? Screenshot 2024-08-20 at 3 06 07 PM

stacysun-cb avatar Aug 20 '24 19:08 stacysun-cb

(Not sure if this will fix your issue) but I hit something similar. I noticed I got this same kind of behavior when I was destructuring the props in the example callback.

adbutterfield avatar Oct 03 '25 06:10 adbutterfield