Web Components

A collection of web components I've built and published to help progressively enhance the web.

• content-warning

  Web component for block and inline content warnings.

  npm install @aarongustafson/content-warning

  Docs (GitHub) Demo npm

• dynamic-datalist

  Web component that enables you to dynamically update a field's `datalist` with values retrieved from a URL as the user types.

  npm install @aarongustafson/dynamic-datalist

  Docs (GitHub) Demo npm

• form-obfuscator

  Web component that obfuscates fields when they don't have focus

  npm install @aarongustafson/form-obfuscator

  Docs (GitHub) Demo npm

• form-repeatable

  A web component that enables you to control the duplication of fields.

  npm install @aarongustafson/form-repeatable

  Docs (GitHub) Demo npm

• form-required-checkboxes

  Web component that enables requirement rules for checkbox groups.

  npm install @aarongustafson/form-required-checkboxes

  Docs (GitHub) Demo npm

• form-required-if

  Web component that enables fields to be required based on the value(s) of other fields.

  npm install @aarongustafson/form-required-if

  Docs (GitHub) Demo npm

• form-show-if

  Web component that enables you to make one HTML form field show (or not) based on the value(s) of another field.

  npm install @aarongustafson/form-show-if

  Docs (GitHub) Demo npm

• form-validation-list

  A web component comprising a list of validation rules for a field.

  npm install @aarongustafson/form-validation-list

  Docs (GitHub) Demo npm

• fullscreen-control

  A web component to add progressively enhance any video or iframe element to have fullscreen capabilities.

  npm install @aarongustafson/fullscreen-control

  Docs (GitHub) Demo npm

• lazy-img

  Web component that enables you to lazy load an image based on screen size.

  npm install @aarongustafson/lazy-img

  Docs (GitHub) Demo npm

• pull-to-refresh

  Web component that enables pull-to-refresh functionality.

  npm install @aarongustafson/pull-to-refresh

  Docs (GitHub) Demo npm

• tabbed-interface

  A web component that transforms heading-structured content into an accessible tabbed interface.

  npm install @aarongustafson/tabbed-interface

  Docs (GitHub) Demo npm

• table-modifiable

  A web component that enables users to hide & show columns on an HTML table.

  npm install @aarongustafson/table-modifiable

  Docs (GitHub) Demo npm

• table-sortable

  A web component to enable users to sort the data in a table based on table cell values.

  npm install @aarongustafson/table-sortable

  Docs (GitHub) Demo npm