open-index/open-npm huggingface dataset:
npm package: @rewl/kit
Description: Yet another JavaScript toolbox module.
Author: i'DLisT
Latest version: 0.1.5

# @rewl/kit

Heavily inspired by [cosmokit](https://github.com/shigma/cosmokit).

This toolkit does not try to replicate or replace `underscore`, `lodash`, `radash` or other toolkits.

# Why?

- I believe I have coded those utilities tens of hundreds of times.
- To use *(somewhat)* more modern (but *not necessary* to be efficient) syntax.
- To make TypeScript and ESLint happy.
npm package: @reworkjs/babel-preset-reworkjs
Description: The babel preset for applications built using ReworkJS (optional)
Author: Guylian Cox
Latest version: 0.3.0

# babel-preset-reworkjs

This package contains the babel configuration used by default by reworkjs-based applications. You can
read more on its usage inside the [reworkjs](https://github.com/reworkjs/reworkjs/blob/develop/docs/babel.md) documentation.

## Install

`npm install --save-dev @reworkjs/babel-preset-reworkjs`
npm package: @reworkjs/cli
Description: Command Line Interface for the ReworkJs Framework
Author: Guylian Cox
Latest version: 0.1.0

# @reworkjs/cli

The [rework.js](https://github.com/reworkjs/reworkjs) command line interface.  
Install this globally to gain access to the `rjs` command from anywhere on your system.

`npm install -g @reworkjs/cli`

This package is little more than a wrapper around the local cli provided by `@reworkjs/core`, as well as a `rjs init` command.  
Therefore, there is no need to install it locally. Always install it globally or not at all.

## Commands

Please refer to [The ReworkJS CLI documentation](https://github.com/reworkjs/reworkjs/blob/develop/docs/cli.md) for 
the list of available commands, or run `rjs --help`.
npm package: @reworkjs/core
Description: A react framework that works out of the box
Author: Guylian Cox
Latest version: 0.35.4

---
name: Introduction
route: /
---

# [rework.js](https://www.reworkjs.com/)

*Opinionated React Framework*

rework.js is an opinionated, extensible, Framework designed for Progressive Web Apps.

The main motivation for this project is to separate the boilerplate from the project code. Configure the boilerplate, don't write it.

## Principles

- **Familiar**: This framework follows community conventions and is regularly updated with new ideas from the community.
- **Minimise boilerplate code**: Boilerplate code is difficult to update when you have multiple projects, you need to copy-paste a lot. Most people won't do it and lose out on new awesome features as the tech progresses.
- **Optimized**: In production, the app should run as fast as it can. Even on slow devices.
- **Modular**: The code should not be split by type of technology but by features.
- **Extensible**: Need something not provided by core? You can install or write a plugin for that!
- **Universal**: Your app should be able to be server-side rendered, or run as a standalone.

## Main Features

- Hot Reloading
- [Code Splitting](https://www.reworkjs.com/routing#code-splitting--lazy-loading)
- Built-in support for `.browserslistrc`
- Supports [TypeScript](https://www.reworkjs.com/typescript)
- Built-in support for [CSS Modules, SCSS & PostCSS](https://www.reworkjs.com/styling)
- [Server-Side Rendering](https://www.reworkjs.com/server-side-rendering) ready
- [Automatic Locale Management](https://www.reworkjs.com/i18n)
- [Static and dynamic assets](https://www.reworkjs.com/public-resources)
- And much more!

## Projects built with rework

- [santa.be](https://github.com/ephys/santa.be)
npm package: @reworkjs/postcss-preset-reworkjs
Description: PostCSS preset for applications built using ReworkJS
Author: Guylian Cox
Latest version: 0.6.0

# postcss-preset-reworkjs

This package contains the PostCSS configuration used by default by reworkjs-based applications. You can
read more on its usage inside the [reworkjs](https://github.com/reworkjs/reworkjs/blob/develop/docs/postcss.md) documentation.

## Install

`npm install --save-dev @reworkjs/postcss-preset-reworkjs`
npm package: @reworkjs/redux
Description: Redux Plugin for ReworkJS
Author: Guylian Cox
Latest version: 2.0.1

# Rework Redux Adapter

Installs and configures a redux store on a rework instance.

This adapter comes pre-configured with the following:

- enforced immutability
- server-side rendering
- redux-saga
- lazy-loadable reducers and sagas

## Store parts
npm package: @reworkjs/reworkjs
Description: A react framework that works out of the box
Author: Guylian Cox
Latest version: 0.29.3
Deprecated: This package has been renamed to @reworkjs/core

---
name: Introduction
route: /
---

# [rework.js](https://www.reworkjs.com/)

*Opinionated React Framework*

rework.js is an opinionated, extensible, Framework designed for Progressive Web Apps.

The main motivation for this project is to separate the boilerplate from the project code. Configure the boilerplate, don't write it.

## Principles

- **Familiar**: This framework follows community conventions and is regularly updated with new ideas from the community.
- **Minimise boilerplate code**: Boilerplate code is difficult to update when you have multiple projects, you need to copy-paste a lot. Most people won't do it and lose out on new awesome features as the tech progresses.
- **Optimized**: In production, the app should run as fast as it can. Even on slow devices.
- **Modular**: The code should not be split by type of technology but by features.
- **Extensible**: Need something not provided by core? You can install or write a plugin for that!
- **Universal**: Your app should be able to be server-side rendered, or run as a standalone.

## Main Features

- Hot Reloading
- [Code Splitting](https://www.reworkjs.com/routing#code-splitting--lazy-loading)
- Built-in support for `.browserslistrc`
- Supports [TypeScript](https://www.reworkjs.com/typescript)
- Built-in support for [CSS Modules, SCSS & PostCSS](https://www.reworkjs.com/styling)
- [Server-Side Rendering](https://www.reworkjs.com/server-side-rendering) ready
- [Automatic Locale Management](https://www.reworkjs.com/i18n)
- [Static and dynamic assets](https://www.reworkjs.com/public-resources)
- And much more!

## Projects built with rework

- [santa.be](https://github.com/ephys/santa.be)
npm package: @reworkk/react-debounce
Description: Use debounce in React
Author: reworkk
Latest version: 2.0.0

# Use debounce in React

- [Installation](#installation)
- [Advantages](#advantages)
- [Examples](#examples)
  - [Expensive calculation](#example-calculation)
  - [Search and HTTP requests](#example-search)
- [API reference](#api-reference)
  - [useDebounceCallback](#usedebouncecallback)
  - [useDebounceState](#usedebouncestate)

## Installation <a id="installation"></a>

* yarn add @reworkk/react-debounce
* npm install @reworkk/react-debounce

## Advantages <a id="advantages"></a>

* No dependencies
* Written in TypeScript

## Examples <a id="examples"></a>

### Expensive calculation  <a id="example-calculation"></a>
```tsx
const [expensiveCalculation] = useDebounceCallback(() => { ... });
// if user clicks twice, the first call will be cancelled
return <button onClick={expensiveCalculation}>Click</button>
```

### Search and HTTP requests <a id="example-search"></a>
```tsx
const [searchText, setSearchText] = useDebounceState('');
const searchParam = useMemo(() => filterValue === '' ? '' : `?search=${searchText}`, [searchText]);

useEffect(() => {
  fetch(`/api/url${searchParam}`);
}, [searchParam]);

// when you stop typing, setSearchText will be called after 300ms (default timeout)
return <input defaultValue={searchText} onChange={({ target }) => setSearchText(target.value)} />
```

## Hooks API reference <a id="api-reference"></a>

### useDebounceCallback(callback, options) <a id="usedebouncecallback"></a>

#### Arguments

| **Argument** | **Description** |
| --- | --- |
| `callback` | Function, that will be executed after delay, if `DebouncedCallback` will be executed |
| `options` | Configuration object to control hook behavior (`Options`)  |

#### Options

| **Option** | **Description** |
| --- | --- |
| `timeMs` | Delay before function will be executed (default - 300 ms) |
| `deps` | Dependencies that indicate that hook `callback` is changed (default - []) |

#### Returns [DebouncedCallback, CancelFunction]

| **Type** | **Description** |
| --- | --- |
| `DebouncedCallback` | Function that will execute provided callback after timeout (default - 300 ms) |
| `CancelFunction` | Function that allows to prevent callback execution |

### useDebounceState(defaultValue, timeMs) <a id="usedebouncestate"></a>

#### Arguments

| **Argument** | **Description** |
| --- | --- |
| `defaultValue` | Initial state |
| `timeMs` | Delay before state will be updated (default - 300 ms)  |

#### Returns [State, SetStateFunction, CancelFunction]

| **Type** | **Description** |
| --- | --- |
| `State` | Current state |
| `SetStateFunction` | Function that allows to update current state |
| `CancelFunction` | Function that allows to prevent execution of `SetStateFunction` |