Security News
The Push to Ban Ransom Payments Is Gaining Momentum
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
reakit-system
Advanced tools
Readme
This is experimental and may have breaking changes in minor versions.
npm:
npm i reakit-system
Yarn:
yarn add reakit-system
import { useRole } from "reakit/Role";
import { createHook } from "reakit-system";
const useA = createHook({ name: "A", compose: useRole });
Creates a React component.
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
)import { createComponent } from "reakit-system";
const A = createComponent({ as: "a" });
Creates a React custom hook that will return component props.
options
CreateHookOptions<O, P>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} />;
}
Merges multiple system objects into a single system object.
systems
...Timport { 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>
);
}
Provider component that is used by reakit
's Provider
underneath.
props
SystemProviderProps
props.children
props.unstable_system
// 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>
);
}
Custom hook that will call children
if it's a function. If
useCreateElement
has been passed to the context, it'll be used instead.
type
Tprops
Record<string, any>children
React.ReactNode (optional, default props.children
)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
React custom hook that returns the options returned by a given
use${name}Options
in the SystemContext.
name
stringoptions
T (optional, default {}as T
)htmlProps
any (optional, default {}
)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
React custom hook that returns the props returned by a given
use${name}Props
in the SystemContext.
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
React custom hook that returns the value of any token defined in the
SystemContext. It's mainly used internally in useOptions
and useProps
.
token
stringdefaultValue
T?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
MIT © Diego Haz
FAQs
Reakit System utils
We found that reakit-system demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Ransomware costs victims an estimated $30 billion per year and has gotten so out of control that global support for banning payments is gaining momentum.
Application Security
New SEC disclosure rules aim to enforce timely cyber incident reporting, but fear of job loss and inadequate resources lead to significant underreporting.
Security News
The Python Software Foundation has secured a 5-year sponsorship from Fastly that supports PSF's activities and events, most notably the security and reliability of the Python Package Index (PyPI).