README
solid-use">
A collection of SolidJS utilities
Install
npm install --save solid-js solid-use
yarn add solid-js solid-use
Usage
atom
A simplified version of createSignal
. Instead of returning a tuple, it returns a single function that serves as the accessor and the dispatcher.
import { atom } from 'solid-use';
const message = atom('Hello');
createEffect(() => {
console.log(message());
});
message('Bonjour');
string
string
is a tagged template for reactive string templates. It returns an accessor function that returns the latest computed string.
import { createSignal } from 'solid-js';
import { string } from 'solid-use';
const [greeting, setGreeting] = createSignal('Hello');
const [target, setTarget] = createSignal('Solid');
const message = string`${greeting}, ${target}!`;
createEffect(() => {
console.log(message()); // Hello, Solid!
});
setGreeting('Bonjour'); // Bonjour, Solid!
and spreaddestructure
Allows splitting a reactive object (ideally, the props) into a field of accessors. spread
is eager while destructure
is lazy.
import { spread, destructure } from 'solid-use';
function MyComponent(props) {
// destructure only creates accessors
// based on the defined destructured fields
const { greeting, target } = destructure(props);
return <h1>{greeting()}, {target()}!</h1>
}
function AnotherComponent(props) {
// spread creates accessors for every field in the object
return <MyComponent {...spread(props)} />
}
<AnotherComponent greeting="Hello" target="Solid" />
Provider
SolidJS already provides the Context API for injecting values down the component tree, however, this may lead into an unwanted pyramid of doom for nested Context.
Provider provides a compositional way to inject values not just the component tree, but also inside captured callbacks. You can also use the Provider API outside components, useful for injecting values inside global side-effects.
createProvider
Creates a unique provider key that also holds a default value. This is similar to createContext
although with different behaviors.
import { createProvider } from 'solid-use';
const MessageProvider = createProvider('Hello World');
and provideinject
provide
accepts a Provider instance and a value to be injected. inject
performs a lookup in the provider scope for the corresponding Provider value. If inject
cannot find the Provider instance, the default value of the Provider is returned.
provide(MessageProvider, 'Hello Solid');
//...
const value = inject(MessageProvider); // Hello Solid
providerScope
Accepts a callback that is executed synchronously. providerScope
provides an internal context that allows injecting values across boundaries. This is must be used for provide
and inject
to work.
providerScope(() => {
provide(XProvider, 'X');
provide(YProvider, 'Y');
});
capturedProvider
Wraps a callback into a captured callback that holds the current Provider scope. This allows inject
to perform lookup even outside the synchronous scope.
createEffect(capturedProvider(() => {
const value = inject(MessageProvider);
}));
withProvider
A higher-order component that internally wraps a component with a providerScope
.
and omitPropspickProps
Much similar to the built-in splitProps
, omitProps
removes selected keys while pickProps
picks the selected keys from the source props
<button {...excludeProps(props, ['ref', 'onClick'])} />
Others
- useMediaQuery
- useOnlineStatus
- usePageVisibility
- usePrefersDark
- usePrefersLight
- usePrefersReducedMotion
License
MIT © lxsmnsyc