JSPM

  • Created
  • Published
  • Downloads 50752
  • Score
    100M100P100Q158988F
  • License MIT

Primitive that provides controllable props signals like knobs/controls

Package Exports

  • @solid-primitives/props
  • @solid-primitives/props/dist/index.cjs
  • @solid-primitives/props/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@solid-primitives/props) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

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.