Reakit-system NPM

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

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 {...props} />;
}

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 (
    <Provider unstable_system={system}>
      <div>App</div>
    </Provider>
  );
}

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 (
    <SystemProvider unstable_system={system}>
      <div>App</div>
    </SystemProvider>
  );
}

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 (
    <SystemProvider unstable_system={system}>
      <Component url="url">{({ url }) => <a href={url}>link</a>}</Component>
    </SystemProvider>
  );
}

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} {...htmlProps} />;
}

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

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 {...props} />;
}

function App() {
  return (
    <SystemProvider unstable_system={system}>
      <A url="url">It will convert url into href in useAProps</A>
    </SystemProvider>
  );
}

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 {...props}>{token}</div>;
}

function App() {
  return (
    <SystemProvider unstable_system={system}>
      <Component />
    </SystemProvider>
  );
}

Returns T