open-index/open-npm huggingface dataset:
npm package: @jsxtools/classes
Description: Returns a normalized string of class names from strings, arrays, or objects.
Author: Jonathan Neal
Latest version: 1.0.6

# classes [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/classes.svg" height="20">](https://www.npmjs.com/package/@jsxtools/classes)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/classes.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:classes)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/classes.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:classes)

**classes** returns a normalized string of class names from strings, arrays, or objects.

It is <strong size>302 bytes (212 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/classes
```

## Usage

```js
import classes from '@jsxtools/classes';

classes('this', 'that', 'this'); // 'this that'
classes(['this', 'that', 'this']); // 'this that'
classes({ 'this': true, 'that': true, 'else': false }); // 'this that'
```

[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/create-context-state
Description: Create context states sharable across components in React
Author: Jonathan Neal
Latest version: 1.0.4

# create-context-state [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/create-context-state.svg" height="20">](https://www.npmjs.com/package/@jsxtools/create-context-state)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/create-context-state.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:create-context-state)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/create-context-state.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:create-context-state)

**create-context-state** lets you create context states sharable across components in React.

It is <strong size>231 bytes (184 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/create-context-state
```

## Usage

```js
// state.js creates a sharable state
import createContextState from '@jsxtools/create-context-state';

const [useState, Provider] = createContextState({
  givenName: 'Ellen',
  familyName: 'Ripley'
});

export { useState, Provider };
```

```js
// MyApp.js binds that state to the context of a React DOM tree
import { Provider } from './state.js';

export default function MyApp() {
  return (
    <Provider>
      <MyComponent />
    </Provider>
  );
}
```

```js
// MyComponent.js uses the sharable state in the context of its React DOM tree
import { useState } from './state.js';

export default function MyComponent() {
  let [state, setState] = useState();

  return (
    <form>
      <p>
        <label>
          Given Name
          <input
            defaultValue={state.givenName}
            onInput={event => setState(event.target.value)}
          />
        </label>
      </p>
      <p>
        <label>
          Family Name
          <input
            defaultValue={state.familyName}
            onInput={event => setState(event.target.value)}
          />
        </label>
      </p>
    </form>
  );
}
```

[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/debounce
Description: Returns a function that throttles updates coming in rapid succession.
Author: Jonathan Neal
Latest version: 1.0.6

# debounce [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/debounce.svg" height="20">](https://www.npmjs.com/package/@jsxtools/debounce)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/debounce.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:debounce)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/debounce.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:debounce)

**debounce** returns a function that throttles updates coming in rapid succession.

It is <strong size>176 bytes (142 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/debounce
```

## Usage

```js
import debounce from '@jsxtools/debounce';

window.addEventListener('resize', debounce(() => {
  // resize events
}, 250, true));
```

[frontend]: https://github.com/jsxtools/frontend
npm package: @jsxtools/get-form-data
Description: Returns data from an HTML form element as an object
Author: Jonathan Neal
Latest version: 1.0.5

# get-form-data [<img src="https://avatars.githubusercontent.com/u/52989093" alt="" width="90" height="90" align="right">][frontend]

[<img alt="npm version" src="https://img.shields.io/npm/v/@jsxtools/get-form-data.svg" height="20">](https://www.npmjs.com/package/@jsxtools/get-form-data)
[<img alt="build status" src="https://img.shields.io/travis/jsxtools/frontend/master.svg" height="20">](https://travis-ci.org/github/jsxtools/frontend)
[<img alt="issue tracker" src="https://img.shields.io/github/issues/jsxtools/frontend/get-form-data.svg" height="20">](https://github.com/jsxtools/frontend/issues?q=is:issue+is:open+label:get-form-data)
[<img alt="pull requests" src="https://img.shields.io/github/issues-pr/jsxtools/frontend/get-form-data.svg" height="20">](https://github.com/jsxtools/frontend/pulls?q=is:pr+is:open+label:get-form-data)

**get-form-data** returns data from an HTML form element as an object.

It is <strong size>543 bytes (305 gzipped)</strong>.

## Installation

```sh
npm install @jsxtools/get-form-data
```

## Usage

```html
<form id="form">
  <input type="text" name="someText" value="Chris" />
  <input type="file" name="someFile" />
  <input type="file" name="someFiles" multiple />
  <input type="checkbox" name="someCheckbox" value="Dog" checked />
  <input type="checkbox" name="someCheckbox" value="Cat" checked />
  <input type="checkbox" name="someCheckboxAgain" checked />
  <input type="radio" name="someRadio" value="Dog" checked />
  <input type="radio" name="someRadio" value="Cat" />
  <select name="someSelectOne">
    <option selected>First</option>
    <option>Second</option>
    <option>Third</option>
  </select>
  <select name="someSelectMultiple" multiple>
    <option>First</option>
    <option selected>Second</option>
    <option selected>Third</option>
  </select>
  <textarea name="someTextarea">A place for everything.
And everything in its place.</textarea>
  <input type="hidden" name="someHidden" value="something hidden" />
  <button type="submit">Submit</button>
</form>
```

```js
import getFormData from '@jsxtools/get-form-data';

const data = getFormData(document.getElementById('form'));
/* data = Object {
  "someCheckbox": Array [
    "Dog",
    "Cat",
  ],
  "someCheckboxAgain": "on",
  "someFile": File {},
  "someHidden": "something hidden",
  "someRadio": "Dog",
  "someSelectMultiple": Array [
    "Second",
    "Third",
  ],
  "someSelectOne": "First",
  "someText": "Chris",
  "someTextarea": "A place for everything.\r\nAnd everything in its place.",
} */
```

[frontend]: https://github.com/jsxtools/frontend