// ...
import { PortalGunProvider, createPortal } from "@ridafkih/portalgun";

const MyPortal = createPortal("unique-key");

const MyComponent = () => {
  const [value, setValue] = useState<boolean>(true);
  const text = value ? "Yay, value is true!" : "Unfortunately, value is false.";

  return (
    {/** Anything that goes in here will render in all corresponding `MyPortal.Out` */}
    <MyPortal.In>
      <Text>{text}</Text>
    </MyPortal.In>
  );
};

export const MyApp = () => {
  return (
    <PortalGunProvider>
      {/** This contains is defined above, and contains our `MyPortal.In` */}
      <MyComponent />
      {/** Content of `MyPortal.In` will display here. */}
      <MyPortal.Out />
    </PortalGunProvider>
  );
};