![Combatting Alert Fatigue by Prioritizing Malicious Intent](https://cdn.sanity.io/images/cgdhsj6q/production/f4b746a78cb962a1958bc47a03404258eede690f-1024x1024.webp?w=400&fit=max&auto=format)
Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
reakit-system
Advanced tools
This is experimental and may have breaking changes in minor versions.
npm:
npm i reakit-system
Yarn:
yarn add reakit-system
import { useBox } from "reakit/Box";
import { createHook } from "reakit-system";
const useA = createHook({ name: "A", compose: useBox });
Creates a React component.
options
Options<T, O>
options.as
options.useHook
options.keys
(optional, default useHook&&useHook.__keys||[]
)options.propsAreEqual
(optional, default useHook&&useHook.__propsAreEqual
)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
The npm package reakit-system receives a total of 120,515 weekly downloads. As such, reakit-system popularity was classified as popular.
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
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.