How to use the reakit-playground.usePlaygroundState function in reakit-playground

To help you get started, we’ve selected a few reakit-playground examples, based on popular ways it is used in public projects.

github reakit / reakit / packages / website / src / components / HomePlayground.tsx View on Github external
export default function HomePlayground() {
  const tab = useTabState({ selectedId: "tab" });
  const tabPlayground = usePlaygroundState({ code: tabCode });
  const dialogPlayground = usePlaygroundState({ code: dialogCode });
  const menuPlayground = usePlaygroundState({ code: menuCode });
  const submenuPlayground = usePlaygroundState({ code: submenuCode });
  const menubarPlayground = usePlaygroundState({ code: menubarCode });

  const [modules, setModules] = React.useState<Record<string, any>>({});
  const [clientRendered, setClientRendered] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => setClientRendered(true));
  }, []);

  React.useEffect(() => {
    try {
      const obj = {} as Record<string, any>;
      obj["./Tabs"] = compileComponent(tabPlayground.code, obj, "Tabs");
      obj["./TabsModal"] = compileComponent(
        dialogPlayground.code,
        obj,
github reakit / reakit / packages / website / src / templates / Docs.tsx View on Github external
const { static: isStatic, maxHeight, className } = codeElement.props;
        let [, mode] = className.match(/language-(.+)/) || ([] as any[]);

        const modeMap = {
          html: "htmlmixed",
          js: "javascript"
        };

        if (mode in modeMap) {
          mode = modeMap[mode as keyof typeof modeMap];
        }

        const isDynamic =
          !isStatic && ["js", "jsx", "ts", "tsx"].indexOf(mode) !== -1;
        const [code] = codeElement.props.children;
        const state = usePlaygroundState({ code });

        React.useEffect(() => {
          state.update(code);
        }, [state.update, code]);

        if (isDynamic) {
          return (
            <div>
              <PlaygroundPreview
                modules={{
                  emotion,
                  yup,
                  constate,
                  "lodash/set": set,
                  "styled-components": styled,
                  "react-spring": spring,
github reakit / reakit / packages / website / src / components / HomePlayground.tsx View on Github external
export default function HomePlayground() {
  const tab = useTabState({ selectedId: "tab" });
  const tabPlayground = usePlaygroundState({ code: tabCode });
  const dialogPlayground = usePlaygroundState({ code: dialogCode });
  const menuPlayground = usePlaygroundState({ code: menuCode });
  const submenuPlayground = usePlaygroundState({ code: submenuCode });
  const menubarPlayground = usePlaygroundState({ code: menubarCode });

  const [modules, setModules] = React.useState<Record<string, any>>({});
  const [clientRendered, setClientRendered] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => setClientRendered(true));
  }, []);

  React.useEffect(() => {
    try {
      const obj = {} as Record<string, any>;
      obj["./Tabs"] = compileComponent(tabPlayground.code, obj, "Tabs");
      obj["./TabsModal"] = compileComponent(
        dialogPlayground.code,
github reakit / reakit / packages / website / src / components / HomePlayground.tsx View on Github external
export default function HomePlayground() {
  const tab = useTabState({ selectedId: "tab" });
  const tabPlayground = usePlaygroundState({ code: tabCode });
  const dialogPlayground = usePlaygroundState({ code: dialogCode });
  const menuPlayground = usePlaygroundState({ code: menuCode });
  const submenuPlayground = usePlaygroundState({ code: submenuCode });
  const menubarPlayground = usePlaygroundState({ code: menubarCode });

  const [modules, setModules] = React.useState<Record<string, any>>({});
  const [clientRendered, setClientRendered] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => setClientRendered(true));
  }, []);

  React.useEffect(() => {
    try {
      const obj = {} as Record<string, any>;
      obj["./Tabs"] = compileComponent(tabPlayground.code, obj, "Tabs");
      obj["./TabsModal"] = compileComponent(
        dialogPlayground.code,
        obj,
        "TabsModal"
github reakit / reakit / packages / website / src / components / HomePlayground.tsx View on Github external
export default function HomePlayground() {
  const tab = useTabState({ selectedId: "tab" });
  const tabPlayground = usePlaygroundState({ code: tabCode });
  const dialogPlayground = usePlaygroundState({ code: dialogCode });
  const menuPlayground = usePlaygroundState({ code: menuCode });
  const submenuPlayground = usePlaygroundState({ code: submenuCode });
  const menubarPlayground = usePlaygroundState({ code: menubarCode });

  const [modules, setModules] = React.useState<Record<string, any>>({});
  const [clientRendered, setClientRendered] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => setClientRendered(true));
  }, []);

  React.useEffect(() => {
    try {
      const obj = {} as Record<string, any>;
      obj["./Tabs"] = compileComponent(tabPlayground.code, obj, "Tabs");
      obj["./TabsModal"] = compileComponent(
github reakit / reakit / packages / website / src / components / HomePlayground.tsx View on Github external
export default function HomePlayground() {
  const tab = useTabState({ selectedId: "tab" });
  const tabPlayground = usePlaygroundState({ code: tabCode });
  const dialogPlayground = usePlaygroundState({ code: dialogCode });
  const menuPlayground = usePlaygroundState({ code: menuCode });
  const submenuPlayground = usePlaygroundState({ code: submenuCode });
  const menubarPlayground = usePlaygroundState({ code: menubarCode });

  const [modules, setModules] = React.useState<Record<string, any>>({});
  const [clientRendered, setClientRendered] = React.useState(false);

  React.useEffect(() => {
    requestAnimationFrame(() => setClientRendered(true));
  }, []);

  React.useEffect(() => {
    try {
      const obj = {} as Record<string, any>;
      obj["./Tabs"] = compileComponent(tabPlayground.code, obj, "Tabs");

reakit-playground

Reakit Playground

MIT
Latest version published 11 months ago

Package Health Score

80 / 100
Full package analysis

Popular reakit-playground functions