0.0.15 • Published 10 months ago
@solid-primitives/controlled-props v0.0.15
@solid-primitives/controlled-props
Library of helpers for creating your own component prototyping tool. (a Storybook alternative if you will) The primitives in this package allow you to create controlls for component props.
Installation
npm install @solid-primitives/controlled-props
# or
yarn add @solid-primitives/controlled-props
# or
pnpm add @solid-primitives/controlled-props
SSR Support
If you are using solid-start with SSR, you may see this error comming form the @solid-primitives/props
package.
TypeError: web.template is not a function
To prevent this, add "@solid-primitives/props"
entry to noExternal
field in your vite config, like so:
export default defineConfig({
plugins: [solid()],
ssr: {
// It allows Vite to preprocess the package
noExternal: ["@solid-primitives/props"],
},
});
createControlledProp
Primitive that provides controllable props signals like knobs/controls for simple component testing
How to use it
You can either create a single prop:
// Second argument can be initialValue for boolean, number, string:
const [string, setString, stringField] = createControlledProp("stringValue", "test");
// Arrays or enums can be provided in an options object:
const [language, setLanguage, languageField] = createControlledProp(
"language",
{ initialValue: "en", options: ["de", "en", "fr", "it"] as const }
// If you want your array to be able to influence the setter/getter types, use `as const`.
);
enum Currency {
AUD,
GBP,
EUR,
USD,
CHF,
JPY,
CNY
}
const [currency, setCurrency, currencyField] = createControlledProp("currency", {
initialValue: Currency.USD,
options: Currency
});
return { languageField(); };
or multiple props in one call:
enum Test { One, Two, Three };
const languages = ['de', 'en', 'fr', 'it'] as const;
const [props, fields] = createControlledProps({
boolean: true,
number: 42,
string: 'text',
array: { initialValue: 'en', options: languages },
enum: { initialValue: Test.Three, options: Test }
});
props == {
boolean: Accessor<boolean>,
setBoolean: Setter<boolean>,
number: Accessor<number>,
setNumber: Setter<number>,
string: Accessor<string>,
setString: Setter<string>,
array: Accessor<string>,
setArray: Setter<string>,
enum: Accessor<Test>,
setEnum: Setter<Test>
};
fields == JSX.Element[];
Demo
https://primitives.solidjs.community/playground/controlled-props/
Changelog
See CHANGELOG.md