Skip to content

Instantly share code, notes, and snippets.

@MarceloPrado
Created October 18, 2023 12:32
Show Gist options
  • Save MarceloPrado/e670e2dc0b94eaf62c10d1bc54369bc9 to your computer and use it in GitHub Desktop.
Save MarceloPrado/e670e2dc0b94eaf62c10d1bc54369bc9 to your computer and use it in GitHub Desktop.
Dynamically toggle between storybook and app
import { config } from "@/app/config";
import { createLogger } from "@/app/observability";
import { useEffect } from "react";
const { appEnv } = config;
const logger = createLogger("developer/storybook");
export const useToggleStorybook = () => {
const [isStorybookEnabled, setIsStorybookEnabled] = useState(false)
useEffect(() => {
if (appEnv === "dev") {
// eslint-disable-next-line @typescript-eslint/no-var-requires
const { registerDevMenuItems } = require("expo-dev-menu");
logger.info("Registering dev menu items");
const devMenuItems = [
{
name: "Toggle storybook",
callback: () => {
logger.info("Toggling storybook");
setIsStorybookEnabled(prev => !prev)
},
},
];
registerDevMenuItems(devMenuItems);
}
}, [toggle]);
return appEnv === "dev"
? { isStorybookEnabled }
: { isStorybookEnabled: false };
};
@MarceloPrado
Copy link
Author

MarceloPrado commented Oct 18, 2023

nevermind the toggle value in the deps array - it's a copy/paste leftover. See original post here: https://twitter.com/marceloterreiro/status/1714620600516272360

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment