Controlled Props

NPM
v0.0.15

#Installation

npm install @solid-primitives/controlled-props
yarn add @solid-primitives/controlled-props
pnpm add @solid-primitives/controlled-props

#Readme

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.

#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