Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
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
The npm package reakit-system receives a total of 112,015 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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.