@solid-primitives/props

Primitive that provides controllable props signals like knobs/controls

Usage no npm install needed!

<script type="module">
  import solidPrimitivesProps from 'https://cdn.skypack.dev/@solid-primitives/props';
</script>

README

@solid-primitives/props

lerna size size

Creates a primitive to provide props signals for simple component testing

Installation

npm install @solid-primitives/props
# or
yarn add @solid-primitives/props

How to use it

You can either create a single prop:

// Second argument can be initialValue for boolean, number, string:
const [string, setString, stringField] = createProp("stringValue", "test");
// Arrays or enums can be provided in an options object:
const [language, setLanguage, languageField] = createProp(
  "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] = createProp("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] = createProps({
  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

TODO

Changelog

Expand Changelog

0.0.100

Initial release

1.0.2

Release initial version with CJS support.