reakit-system

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

Installation

npm:

``sh
npm i reakit-system
`

Yarn:

`sh
yarn add reakit-system
`

Usage

`jsx
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

$3

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

`javascript
import { createComponent } from "reakit-system";

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

$3

Creates a React custom hook that will return component props.

#### Parameters

- options CreateHookOptions<O, P>

#### Examples

`javascript
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 ;
}
`

$3

Merges multiple system objects into a single system object.

#### Parameters

- systems ...T

#### Examples

`javascript
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 (



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

#### Examples

`javascript
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 }) => link}

);
}
`

Returns JSX.Element

$3

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

`javascript
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 ;
}

function App() {
return (


It will convert href into url in useAOptions and then url into href in A


);
}
`

Returns T

$3

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

`javascript
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 ;
}

function App() {
return (

It will convert url into href in useAProps

);
}
`

Returns any

$3

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

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

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

function Component(props) {
const token = useToken("token", "default value");
return

function App() {
return (



);
}
``

Returns T

License

MIT © Diego Haz