How to use reakit-playground - 6 common examples

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

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

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>({});
  const [clientRendered, setClientRendered] = React.useState(false);

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

  React.useEffect(() => {
    try {
      const obj = {} as Record;
      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>
              </div>
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&gt;({});
  const [clientRendered, setClientRendered] = React.useState(false);

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

  React.useEffect(() =&gt; {
    try {
      const obj = {} as Record;
      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&gt;({});
  const [clientRendered, setClientRendered] = React.useState(false);

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

  React.useEffect(() =&gt; {
    try {
      const obj = {} as Record;
      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&gt;({});
  const [clientRendered, setClientRendered] = React.useState(false);

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

  React.useEffect(() =&gt; {
    try {
      const obj = {} as Record;
      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&gt;({});
  const [clientRendered, setClientRendered] = React.useState(false);

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

  React.useEffect(() =&gt; {
    try {
      const obj = {} as Record;
      obj["./Tabs"] = compileComponent(tabPlayground.code, obj, "Tabs");

reakit-playground

Reakit Playground

MIT
Latest version published 3 years ago

Package Health Score

69 / 100
Full package analysis

Popular reakit-playground functions