To help you get started, we've collected the most common ways that reakit-system is being used within popular public projects.

reakit / reakit / packages / reakit-playground / src / PlaygroundPreview.tsx View on Github

export function PlaygroundPreview({
  code,
  modules,
  update,
  componentName,
  ...htmlProps
}: PlaygroundPreviewOptions & PlaygroundPreviewHTMLProps) {
  const options = useOptions(
    "PlaygroundPreview",
    { code, modules, componentName },
    htmlProps
  );

  const ref = React.useRef(null);
  const { id: prefix } = useId({ baseId: "preview" });
  const [error, setError] = React.useState(null);

  const handleError = React.useCallback((e: Error) => {
    setError(e);
    console.error(e); // eslint-disable-line no-console
  }, []);

  const [rendered, setRendered] = React.useState(() => {
    try {

View more ways to use reakit-system

reakit-system

> This is experimental and may have breaking changes in minor versions.

Installation

npm:

npm i reakit-system

Yarn:

yarn add reakit-system

Usage

import { useRole } from "reakit/Role";
import { createHook } from "reakit-system";

const useA = createHook({ name: "A", compose: useRole });

API

Table of Contents

• createComponent
• createHook
• mergeSystem
• SystemProvider
• useCreateElement
• useOptions
• useProps
• useToken

createComponent

Creates a React component.

Parameters

• options Options<T, O>
  • options.as
  • options.useHook
  • options.memo
  • options.propsAreEqual (optional, default useHook?.unstable_propsAreEqual)
  • options.keys (optional, default useHook?.__keys||[])
  • options.useCreateElement (optional, default defaultUseCreateElement)

Examples

import { createComponent } from "reakit-system";

const A = createComponent({ as: "a" });

createHook

Creates a React custom hook that will return component props.

Parameters

• options CreateHookOptions<O, P>

Examples

import { createHook } from "reakit-system";

const useA = createHook({
  name: "A",
  keys: ["url"], // custom props/options keys
  useProps(options, htmlProps) {
    return {
      ...htmlProps,
      href: options.url,
    };
  },
});

function A({ url, ...htmlProps }) {
  const props = useA({ url }, htmlProps);
  return <a>;
}

mergeSystem

Merges multiple system objects into a single system object.

Parameters

• systems ...T

Examples

import { Provider } from "reakit";
import { mergeSystem } from "reakit-system";
import * as bootstrapSystem from "reakit-system-bootstrap";

const mySystem = {
  useButtonProps() {},
};

const system = mergeSystem(bootstrapSystem, mySystem);

function App() {
  return (
    
      <div>App</div>
    
  );
}

SystemProvider

Provider component that is used by reakit's Provider underneath.

Parameters

• props SystemProviderProps
  • props.children
  • props.unstable_system

Examples

// instead of using
import { Provider } from "reakit";
// you can use this
import { SystemProvider } from "reakit-system";
// reakit's Provider has more features, such as ID generation
import * as system from "reakit-system-bootstrap";

function App() {
  return (
    
      <div>App</div>
    
  );
}

useCreateElement

Custom hook that will call children if it's a function. If useCreateElement has been passed to the context, it'll be used instead.

Parameters

• type T
• props Record<string, any>
• children React.ReactNode (optional, default props.children)

Examples

import React from "react";
import { SystemProvider, useCreateElement } from "reakit-system";

const system = {
  useCreateElement(type, props, children = props.children) {
    // very similar to what `useCreateElement` does already
    if (typeof children === "function") {
      const { children: _, ...rest } = props;
      return children(rest);
    }
    return React.createElement(type, props, children);
  },
};

function Component(props) {
  return useCreateElement("div", props);
}

function App() {
  return (
    
      {({ url }) =&gt; </a><a href="{url}">link</a>}
    
  );
}

Returns JSX.Element

useOptions

React custom hook that returns the options returned by a given use${name}Options in the SystemContext.

Parameters

• name string
• options T (optional, default {}as T)
• htmlProps any (optional, default {})

Examples

import React from "react";
import { SystemProvider, useOptions } from "reakit-system";

const system = {
  useAOptions(options, htmlProps) {
    return {
      ...options,
      url: htmlProps.href,
    };
  },
};

function A({ url, ...htmlProps }) {
  const options = useOptions("A", { url }, htmlProps);
  return <a href="{options.url}">;
}

function App() {
  return (
    
      </a><a href="url">
        It will convert href into url in useAOptions and then url into href in A
      </a>
    
  );
}

Returns T

useProps

React custom hook that returns the props returned by a given use${name}Props in the SystemContext.

Parameters

• name string
• options Record<string, any> (optional, default {})
• htmlProps any (optional, default {})

Examples

import { SystemProvider, useProps } from "reakit-system";

const system = {
  useAProps(options, htmlProps) {
    return {
      ...htmlProps,
      href: options.url,
    };
  },
};

function A({ url, ...htmlProps }) {
  const props = useProps("A", { url }, htmlProps);
  return <a>;
}

function App() {
  return (
    
      </a><a>It will convert url into href in useAProps</a>
    
  );
}

Returns any

useToken

React custom hook that returns the value of any token defined in the SystemContext. It's mainly used internally in useOptions and useProps.

Parameters

• token string
• defaultValue T?

Examples

import { SystemProvider, useToken } from "reakit-system";

const system = {
  token: "value",
};

function Component(props) {
  const token = useToken("token", "default value");
  return <div>{token}</div>;
}

function App() {
  return (
    
      
    
  );
}

Returns T

License

MIT © Diego Haz