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 {...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

License

MIT © Diego Haz