Security News
GitHub Removes Malicious Pull Requests Targeting Open Source Repositories
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
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.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
The npm package reakit-system receives a total of 0 weekly downloads. As such, reakit-system popularity was classified as not 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
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.