open-index/open-npm huggingface dataset:
npm package: @reactual/react-dropzone-component
Description: A Dropzone Component for ReactJS
Latest version: 2.1.1

## Dropzone.js Component for React

A Dropzone component for ReactJS, allowing users to "drag and drop" files into an upload area. The component uses the battle-tested [Dropzone.js](http://www.dropzonejs.com/) to provide a cross-browser-compatible upload component.

## License
MIT. For details, please consult `README.md`.
npm package: @reactui-org/core
Description: the future of design systems, build beautiful websites with utility first customizable components
Author: HassanBahati
Latest version: 0.0.1

<b><h1 align="center">React UI</h1></b>

<h1 align="center">The React Components Library:sparkles:</h1>

- :heavy_check_mark: Headless unstyled Components, build your custom UX!
- :rocket: Tailwind CSS Components, do <b>more with less</b> classes!

### Quick start

Inside your root project directory, run;

```sh
npm install @reactui-org/core --save
```

### Usage

```jsx
// Button Component Example
import { Button } from '@reactui-org/core'

<Button backgroundColor="#000" color="#fff">
My Button
<Button/>
```

| Button Props    | Expected Data Type |
| --------------- | ------------------ |
| backgroundColor | String             |
| color           | String             |
| props           | Any                |

:clipboard: [React UI Documentation](https://github.com/OSCA-Kampala-Chapter/react-ui/tree/main/reactui-docs)
:office: [Website](https://github.com/OSCA-Kampala-Chapter/react-ui/tree/main/website)

## :construction: Thanks to all Contributors.

Thank you for spending time to contribute to **our mission of creating the future of design systems, enabling everyone to build beautiful web apps with utility first customizable components**.
Thank you so much:heart:! Keep rocking:rocket:

[![Contributors](https://contrib.rocks/image?repo=OSCA-Kampala-Chapter/react-ui)](https://github.com/OSCA-Kampala-Chapter/react-ui/graphs/contributors)

Want to contribute? Get stared with our [Contributing Guide](https://github.com/OSCA-Kampala-Chapter/react-ui/blob/main/CONTRIBUTING.md).

## License

[MIT](https://github.com/OSCA-Kampala-Chapter/react-ui/blob/main/LICENSE)
npm package: @reactunity/create
Description: Scaffold a ReactUnity app using npm init
Author: Gokhan Kurt
Latest version: 0.18.0

# Create React Unity App

Creates the Typescript project for React Unity. See [core library](https://github.com/ReactUnity/core) for details.

## Usage

If you want to add ReactUnity to an existing Unity project:

`npx @reactunity/create@latest`

If you want to create full Unity app from scratch:

`npx @reactunity/create@latest -u`

Create the React project in a custom folder:

`npx @reactunity/create@latest custom/folder/path`

### Options

Options can be used like: `npx @reactunity/create@latest <options>`

```
  -u, --unity                Creates Unity project from scratch and adds React project into it
  -i, --install [npm|yarn]   Run 'npm install' or 'yarn install'.
  -h, --help                 Print help
```

## Commands

After a project is created, you can run following commands in the `react` directory. You can also use other package managers like `yarn` instead of `npm`.

- `npm start` - Run development server with HMR support
- `npm run build` - Build the production ready Javascript file to `/Assets/Resources/react/index.js`
npm package: @reactunity/previewer
Description: Auxiliary package which includes the default ReactUnity Web Previewer to use with @reactunity/scripts
Author: Gokhan Kurt
Latest version: 0.20.0

# ReactUnity Previewer

If your UI is simple, you can test your UI inside a web browser with a WebGL template. This is the general purpose WebGL template.

Note that as ReactUnity is not optimized for WebGL, you will have a low performance by testing in WebGL.

## Installation

```bash
yarn add --dev @reactunity/previewer
# OR
npm i --D @reactunity/previewer
```
npm package: @reactunity/renderer
Description: React renderer for Unity3D
Author: Gokhan Kurt
Latest version: 0.21.0

# React Unity Renderer

![npm version](https://badge.fury.io/js/%40reactunity%2Frenderer.svg)

React reconciler implementation for React Unity, including Typescript definitions. 
See [main repo](https://github.com/ReactUnity/core) for further info.

## Installation

```
npm i @reactunity/renderer
```
npm package: @reactuniversal/ripple
Description: React Universal Ripple that works with Web, iOS, Android, Electron
Author: Cody Pearce
Latest version: 0.0.1

<p align="center" style="margin-bottom: 0px !important;">
  <img width="600" src="https://raw.githubusercontent.com/react-universal/ripple/master/media/logo.jpg" alt="Material Bread logo" align="center">
</p>


A React Material Ripple component that works on the Web, Android, iOS, Electron, and anywhere else React Native is supported. This component is a part of the React Universal ecosystem of universal React and React Native components. Checkout the [React Universal docs](https://github.com/react-universal/react-universal) to learn more.


### [Storybook Demos](https://react-universal.github.io/ripple/?path=/story/*)



### Installation

```bash
npm i @reactuniversal/ripple --save
```

### Example

```
import React from 'react';
import { View, Text } from 'react-native';
import Ripple from '@reactuniversal/ripple';

export default function Page() {
    return (
      <View style={{flexDirection: 'row', flexWrap: 'wrap'}}>
        <Ripple
          rippleColor={'blue'}
          style={{
            width: 180,
            height: 250,
          }}>
          <Text>Click Me</Text>
        </Ripple>
      </View>
    );
}`;

```

#### Props

| Name                  | Description                                                      | Type   | Default |
| --------------------- | ---------------------------------------------------------------- | ------ | ------- |
| displayUntilPressOut     | Keep ripple at full size while holding press                           | bool | true    |
| disabled                 | Disables ripple                                                    | bool |         |
| onPress           | Callback on ripple                        | func   |         |
| rippleCentered                | Whether the ripple starts at the center of the component or where you clicked                                | bool   |     false    |
| rippleColor                | Color of ripple                                    | string | rgba(0, 0, 0, .87)      |
| rippleContainerBorderRadius | Border Radius of ripple           | number | 0       |
| rippleDuration                 | Animation Duration of ripple to fill the entire component                                            | duration |    400     |
| rippleOpacity            | Opacity of ripple                           | number |   0.3      |
| rippleSize                 | Determines the size of ripple | number |    0     |
| rippleSequential               | Ripple should start in sequence                                    | bool   |     false    |
| style     | Styles root element                         | object |     |
npm package: @reacture-io/eslint-config
Description: A collection of eslint configuration files for consistent development across Reacture
Latest version: 0.0.1

# @reacture-io/eslint-config

A collection of eslint configuration files for consistent development across Reacture

## Overview

This package provides standardized eslint configurations that can be extended in your projects to ensure consistent eslint settings and development experience.

## Installation

```bash
pnpm i --save-dev @reacture-io/eslint-config
```

## Configurations

- **`./base`** - Base configuration for JS/TS projects
- **`./react`** - React applications with Next.js support
- **`./node`** - Node.js backend applications

## Usage

```javascript
// eslint.config.js
import baseConfig from '@reacture-io/eslint-config/base';
export default baseConfig;

// For React
import reactConfig from '@reacture-io/eslint-config/react';
export default reactConfig;

// For Node.js
import nodeConfig from '@reacture-io/eslint-config/node';
export default nodeConfig;
```
npm package: @reacture-io/prettier-config
Description: A configuration for prettier formatter
Latest version: 0.0.1

# @reactute-io/prettier-config

A shared Prettier configuration package for Reacture.

## Features

- **Consistent formatting**: Ensures all code follows the same formatting standards
- **Tailwind CSS support**: Includes `prettier-plugin-tailwindcss` for optimal Tailwind class sorting
- **Modern defaults**: Configured with sensible defaults for modern JavaScript/TypeScript development
- **Easy integration**: Simple setup process for any project

## Installation

Install the package as a dev dependency:

```bash
npm install --save-dev @reacture-io/prettier-config
# or
yarn add --dev @reacture-io/prettier-config
# or
pnpm add --save-dev @reacture-io/prettier-config
```

## Usage

### Basic Setup

Create a `.prettierrc.js` file in your project root:

```javascript
module.exports = require("@reacture-io/prettier-config/base");
```

Or if you're using ES modules, create a `.prettierrc.mjs`:

```javascript
import baseConfig from "@reacture-io/prettier-config/base";
export default baseConfig;
```

### Package.json Configuration

Alternatively, you can add the configuration directly to your `package.json`:

```json
{
  "prettier": "@reacture-io/prettier-config/base"
}
```

## Configuration

The base configuration includes the following settings:

- **Trailing comma**: ES5 style
- **Tab width**: 2 spaces
- **Semicolons**: Always
- **Quotes**: Single quotes
- **JSX quotes**: Single quotes
- **Tabs**: Spaces only
- **Print width**: 80 characters
- **Bracket spacing**: Enabled
- **Bracket same line**: Enabled
- **Arrow function parentheses**: Always
- **Single attribute per line**: Enabled
- **End of line**: LF (Unix style)
- **Plugins**: Tailwind CSS plugin included

## IDE Integration

### VS Code

1. Install the Prettier extension
2. Set Prettier as the default formatter
3. Enable format on save (optional)

Add to your VS Code settings:

```json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}
```

### Other Editors

Most modern editors support Prettier configuration files automatically. The configuration will be picked up when you have a `.prettierrc.js` or `package.json` configuration in your project.

## Scripts

Add these scripts to your `package.json` for convenient formatting:

```json
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}
```

## Ignoring Files

Create a `.prettierignore` file to exclude files from formatting:

```
node_modules
dist
build
```
npm package: @reacture-io/tsconfig
Description: A collection of TypeScript configuration files for consistent development across Reacture.
Latest version: 0.0.1

# @faktion-com/tsconfig

A collection of TypeScript configuration files for consistent development across Faktion projects.

## Overview

This package provides standardized TypeScript configurations that can be extended in your projects to ensure consistent compiler settings and development experience.

## Installation

```bash
pnpm i --save-dev @faktion-com/tsconfig
```

## Usage

### For Node.js projects

```json
{
  "extends": "@faktion-com/tsconfig/node.json"
}
```

### For React projects

```json
{
  "extends": "@faktion-com/tsconfig/react.json"
}
```

### For custom configurations

```json
{
  "extends": "@faktion-com/tsconfig/base.json",
  "compilerOptions": {
    // Your custom options here
  }
}
```
npm package: @reactusehooks/core
Description: Collection of essential SSR friendly react hooks that I have used to survive from the WTF react world
Author: Aung Myat Moe
Latest version: 1.1.2

# @reactusehooks/core  ![npm](https://img.shields.io/npm/v/@reactusehooks/core?style=flat-square)

The core of react-use-hooks which contains the most common hooks.

## Features

- 🎣 **Hooks:** 4+ hooks for common tasks.
- 📦 **Tree-shakable:** Only import what you need.
- 🌐 **TypeScript:** Written in TypeScript with predictable static types.
- 📚 **Docs:** Each hook has a detailed docs.
- 🐣 **Tiny:** Less than 1.5kb gzipped.
- 🎯 **Works with Next.js:** Use hooks in Next.js without any issues.

## Install

```bash
npm install @reactusehooks/core
```

## Usage

Every single hook is inferred by TypeScript, so you don't need to specify the type of the hook.

```tsx
import {useLocalStorage} from '@reactusehooks/core'

const App = () => {
    const [value, setValue] = useLocalStorage('my-key', 'my-value')

    return (
        <div>
            <input value={value} onChange={e => setValue(e.target.value)}/>
        </div>
    )
}
```

## Documentation

Full documentation can be found at [https://reactuse-hooks.vercel.app/](https://reactuse-hooks.vercel.app/).
npm package: @reactutils/use-delayed-queue
Description: A custom hook for queuing and executing functions in order with a specified timeout.
Author: Sepehr Karimi
Latest version: 1.0.0

# @reactutils/use-delayed-queue

[![NPM](https://img.shields.io/npm/v/@reactutils/use-delayed-queue.svg)][package-npm-link]
[![NPM](https://img.shields.io/bundlephobia/min/@reactutils/use-delayed-queue)][package-bundlephobia]

> A custom hook for queuing and executing functions in order with a specified timeout.


## Installation

```sh
npm install @reactutils/use-delayed-queue

# or

yarn add @reactutils/use-delayed-queue
```

## Usage:

```ts
import useQueue from '@reactutils/use-delayed-queue';

function MyComponent() {
  const { addToQueue } = useQueue();

  const fn1 = () => {
    console.log('Function 1 executed');
  };

  const fn2 = () => {
    console.log('Function 2 executed');
  };

  addToQueue(fn1);
  addToQueue(fn2);

  return <div>My Component</div>;
}
```

[package-npm-link]: https://www.npmjs.com/package/@reactutils/use-delayed-queue
[package-bundlephobia]: https://bundlephobia.com/package/@reactutils/use-delayed-queue
npm package: @reactutils/use-delayed-stack
Description: A React hook used for batching real-time or periodic data processing by accumulating data in a stack and calling a callback function with a specified delay.
Author: Sepehr Karimi
Latest version: 1.0.3

# @reactutils/use-delayed-stack

[![NPM](https://img.shields.io/npm/v/@reactutils/use-delayed-stack.svg)][package-npm-link]
[![NPM](https://img.shields.io/bundlephobia/min/@reactutils/use-delayed-stack)][package-bundlephobia]

> a React hook used for batching real-time or periodic data processing by accumulating data in a stack and calling a callback function with a specified delay.

The purpose of the use-delayed-stack hook is to allow for efficient handling of real-time or periodic data by accumulating it in a stack over time and calling a user-provided callback function after a specified delay. This allows for batching of data processing, resulting in improved performance over calling the callback function for each individual data point.


## Installation

```sh
npm install @reactutils/use-delayed-stack

# or

yarn add @reactutils/use-delayed-stack
```


This is a custom React hook named `use-delayed-stack`. It takes in three arguments:

`callback`: A function that takes an array of type T as its argument and returns void. This function will be called whenever the stack is flushed.

`delay`: A number which represents the delay in milliseconds after which the stack is flushed.
initialValue: An optional argument which determines the initial value of the stack. If not provided, the initial value of the stack will be an empty array.
The hook returns an array of two values:

`pushToStack`: A function that takes a value of type T as its argument and adds it to the stack.

`cancel`: A function that aborts the current timer and creates a new abort controller.
The hook uses useRef to create references to the current stack, timer and abort controller. It also uses useEffect to create a new interval timer when the hook is called and to clear it up when it's unmounted.

Whenever the timer is triggered, it checks if the stack has any items, and if it does, it will call the provided callback and empty the stack. The cancel function aborts the current timer and creates a new one so that the stack will start accumulating new items again.


## Usage:

```ts
import useDelayedStack from '@reactutils/use-delayed-stack';

const [pushToStack, cancel] = useDelayedStack(callback, delay, initialValue);

// To push a value onto the stack
pushToStack(value);

// To stop the timer manually
cancel();
```

[package-npm-link]: https://www.npmjs.com/package/@reactutils/use-delayed-stack
[package-bundlephobia]: https://bundlephobia.com/package/@reactutils/use-delayed-stack
npm package: @reactutils/use-local-storage
Description: A custom hook that provides a simple interface to the browser's local storage.
Author: Sepehr Karimi
Latest version: 1.0.0

# @reactutils/use-local-storage

[![NPM](https://img.shields.io/npm/v/@reactutils/use-local-storage.svg)][package-npm-link]
[![NPM](https://img.shields.io/bundlephobia/min/@reactutils/use-local-storage)][package-bundlephobia]

> A custom hook that provides a simple interface to the browser's local storage.

Store a key-value pair in the browser's local storage. The value will persist even after the browser is closed. Since the local storage API isn't available in server-rendering environments, we check that `typeof window !== "undefined"` to make SSR and SSG work properly.

## Installation

```sh
npm install @reactutils/use-local-storage

# or

yarn add @reactutils/use-local-storage
```


## Usage

```jsx
 function App() {
   // Similar to useState but first arg is key, and the second is the default value.
   const [name, setName] = useLocalStorage<string>("name", "Bob");
   
   return (
     <div>
       <input
         type="text"
         placeholder="Enter your name"
         value={name}
         onChange={(e) => setName(e.target.value)}
       />
     </div>
   );
 }
 ```
[package-npm-link]: https://www.npmjs.com/package/@reactutils/use-local-storage
[package-bundlephobia]: https://bundlephobia.com/package/@reactutils/use-local-storage
npm package: @reactutils/use-previous
Description: A custom hook that uses the useRef hook internally for storing the previous value.
Author: Sepehr Karimi
Latest version: 1.0.0

# usePrevious

[![NPM](https://img.shields.io/npm/v/@reactutils/use-previous.svg)][package-npm-link]

> A custom hook that uses the useRef hook internally for storing the previous value.

## Installation

```sh
npm install @reactutils/use-previous

# or

yarn add @reactutils/use-previous
```


## Usage

```jsx
function App() {
  // State value and setter for our example
  const [count, setCount] = useState<number>(0);
  // Get the previous value (was passed into hook on last render)
  const prevCount: number = usePrevious<number>(count);
  // Display both current and previous count value
  return (
    <div>
      <h1>
        Now: {count}, before: {prevCount}
      </h1>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

```

[package-npm-link]: https://www.npmjs.com/package/@reactutils/use-previous
npm package: @reactutils/use-windows-size
Description: This hook returns an object containing the window's width and height.
Author: Sepehr Karimi
Latest version: 1.0.0

# @reactutils/use-windows-size

[![NPM](https://img.shields.io/npm/v/@reactutils/use-windows-size.svg)][package-npm-link]
[![NPM](https://img.shields.io/bundlephobia/min/@reactutils/use-windows-size)][package-bundlephobia]

> this hook returns an object containing the window's width and height. If executed server-side (no window object) the value of width and height will be undefined.

## Installation

```sh
npm install @reactutils/use-windows-size

# or

yarn add @reactutils/use-windows-size
```


## Usage

```jsx
import useWindowSize from '@reactutils/use-windows-size';

// Usage
function App() {
  const size = useWindowSize();
  
  return (
    <div>
      {size.width}px / {size.height}px
    </div>
  );
}
```

[package-npm-link]: https://www.npmjs.com/package/@reactutils/use-windows-size
[package-bundlephobia]: https://bundlephobia.com/package/@reactutils/use-windows-size
npm package: @reactway/api-builder
Description: An easy api client builder for applications with identity.
Author: ReactWay
Latest version: 1.0.1

[![NPM version](https://img.shields.io/npm/v/@reactway/api-builder.svg?logo=npm)](https://www.npmjs.com/package/@reactway/api-builder)
[![Build Status](https://img.shields.io/azure-devops/build/reactway/reactway/7/master.svg?logo=azuredevops)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=7)
[![Code coverage](https://img.shields.io/azure-devops/coverage/reactway/reactway/7/master.svg)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=7)
[![Dependencies](https://img.shields.io/david/reactway/api-builder.svg)](https://david-dm.org/reactway/api-builder)
[![Dev dependencies](https://img.shields.io/david/dev/reactway/api-builder.svg)](https://david-dm.org/reactway/api-builder?type=dev)

# @reactway/api-builder

An easy api client builder for applications with identity.

## Features

-   API builder is ready for SPA development
-   OAuth identity mechanism included

## Get started

```sh
$ npm install @reactway/api-builder
```

To start using api builder first it needs to make an `ApiConfiguration` with structure (**host** field is **required**). Then initiate class with created configuration.

```ts
interface ApiConfiguration {
    host: string;
    path?: string;
    defaultHeaders?: { [index: string]: string };
    defaultAuthRequired?: boolean;
    identity?: IdentityMechanism;
    defaultQueryParams?: QueryParams;
    requestQueueLimit?: number;
}

const apiConfiguration: ApiConfiguration = {
    host: "https://example.com"
};

const ApiClient = new ApiBuilder(apiConfiguration);
```

To make request you have create an `ApiRequest` typed object or arrow function if you want to pass parameters. `method` and `requestPath` fields are **required** for `ApiRequest`.

```ts
const getExample: ApiRequest = {
    method: HttpMethods.GET
    requestPath: PATH_GET
};

const getExample = (id: number): ApiRequest => {
    return {
        method: HttpMethods.GET,
        requestPath: `/${id}`
    };
};
```

Only http(s) method `GET` does not take `body` param. Rest of methods takes passed typed `body`. To pass typed `body` to a request here is an example.

```ts
interface Person {
    name: string;
    surname: string;
}

const getExample = await apiBuilder.post<Person>({
    requestPath: "/post",
    body: {
        name: "John",
        surname: "Snow"
    }
});
```

Also you can pass `QueryParams`.

```ts
type QueryParams = { [key: string]: string | number | Array<string | number> };

const getExample: ApiRequest = {
    method: HttpMethods.GET
    requestPath: PATH_GET,
    queryParams: {
        page: 2
    }
};
```

## API

WIP

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/dropdown
Description: A flexible React dropdown component.
Author: ReactWay
Latest version: 5.0.0-beta.2

[![NPM version](https://img.shields.io/npm/v/@reactway/dropdown.svg?logo=npm)](https://www.npmjs.com/package/@reactway/dropdown)
[![Build Status](https://img.shields.io/azure-devops/build/reactway/reactway/1/master.svg?logo=azuredevops)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=1)
[![Code coverage](https://img.shields.io/azure-devops/coverage/reactway/reactway/1/master.svg)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=1)
[![Dependencies](https://img.shields.io/david/reactway/dropdown.svg)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=1)
[![Dev dependencies](https://img.shields.io/david/dev/reactway/dropdown.svg)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=1)

# @reactway/dropdown

## [Docs](./docs/index.md) | [API](./docs/api/index.md)

A flexible React dropdown component. Created with hooks :tada:.

## Get started 
```sh
$ npm install @reactway/dropdown
```
## Features
- Toggles dropdown when clicked on `DropdownHeader` component
- Closes dropdown when clicked outside of `DropdownHandler` component<sup>*</sup>
- Closes dropdown when clicked on `DropdownSection` component
- Closes dropdown when clicked Escape button on keyboard
- Extendable base components
- Supports server side rendering

<sup>*</sup> This will not work when click event has stopped propagation (`event.stopPropagation()`) and therefore `window.addEventListener("click", ...)` will not receive event.

## License
Released under the [MIT license](LICENSE).
npm package: @reactway/tiny-emitter
Description: Small change emitter
Author: Martynas Žilinskas
Latest version: 1.0.2

[![NPM version](https://img.shields.io/npm/v/@reactway/tiny-emitter.svg?logo=npm)](https://www.npmjs.com/package/@reactway/tiny-emitter)
[![Build Status](https://img.shields.io/azure-devops/build/reactway/reactway/6/master.svg?logo=azuredevops)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=6)
[![Code coverage](https://img.shields.io/azure-devops/coverage/reactway/reactway/6/master.svg)](https://dev.azure.com/reactway/ReactWay/_build?definitionId=6)
[![Dependencies](https://img.shields.io/david/reactway/tiny-emitter.svg)](https://david-dm.org/reactway/tiny-emitter)
[![Dev dependencies](https://img.shields.io/david/dev/reactway/tiny-emitter.svg)](https://david-dm.org/reactway/tiny-emitter?type=dev)

# @reactway/tiny-emitter

Small library to handle change emits.

## Get started

```sh
$ npm install @reactway/tiny-emitter
```

## Example

```ts
type CounterHandler = (count: number) => void;
const handler: CounterHandler = count => console.log("Counter:", count);

const counterEmitter = new TinyEmitter<CounterHandler>();

const removeListener = counterEmitter.addListener(handler);

counterEmitter.emit(1); // Emit change with value count=1
// Console log: Counter: 1

removeListener(); // Remove registered listener
```

## API

`.addListener(handler: Callback): () => void`

`.removeListener(handler: Callback): void`

`.emit(...payload: any): void`

`.getListenersCount(): number`

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder
Description: A tool to create webpack config easier using plugins.
Latest version: 2.0.4

# @reactway/webpack-builder

A tool to create webpack config easier using @reactway plugins.

## Getting started

```sh
$ npm i @reactway/webpack-builder
```

To create a webpack config with builder first you have to create `webpack.config.js` and add import to it. You must define **workspace directory** and base configuration with **`entry`** and **`output`** fields to able use.

## Example config

```js
const webpackBuilder = require("@reactway/webpack-builder");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
}).toConfig();
```

## API

`use()` - Insert plugin to config. Possible to use more than one plugin.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const examplePlugin = require("@reactway/webpack-builder-example-plugin");
const examplePluginOther = require("@reactway/webpack-builder-example-plugin-other");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(examplePlugin)
    .use(examplePluginOther)
    .toConfig();
```

---

`update()` - Update webpack config fields.

```js
const webpackBuilder = require("@reactway/webpack-builder");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .update(webpack => {
        webpack.mode = "production";
        return webpack;
    })
    .toConfig();
```

---

`toConfig()` - Returns `webpack` config to use. **Required to generate configuration.**

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder-plugin-clean
Description: A plugin made for webpack-builder.
Latest version: 2.0.4

# @reactway/webpack-builder-plugin-clean

A plugin made for webpack-builder.

## Getting started

```sh
$ npm i @reactway/webpack-builder-plugin-clean
```

Add plugin into webpack config by using `use()` builder method.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const clean = require("@reactway/webpack-builder-plugin-clean");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(clean)
    .toConfig();
```

## Passing options

It is wrapped [clean-webpack-plugin](https://www.npmjs.com/package/clean-webpack-plugin). All options you can pass from the wrapped package. Available options you can check at [clean-webpack-plugin-options](https://www.npmjs.com/package/clean-webpack-plugin#options-and-defaults-optional)

```js
const webpackBuilder = require("@reactway/webpack-builder");
const clean = require("@reactway/webpack-builder-plugin-clean");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(clean, {
        dry: true,
        cleanStaleWebpackAssets: false,
        ...
    })
    .toConfig();
```

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder-plugin-html
Description: A plugin made for webpack-builder.
Latest version: 2.0.4

# @reactway/webpack-builder-plugin-html

A plugin made for webpack-builder.

## Getting started

```sh
$ npm i @reactway/webpack-builder-plugin-html
```

Add plugin into webpack config by using `use()` builder method.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const htmlPlugin = require("@reactway/webpack-builder-plugin-html");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(htmlPlugin)
    .toConfig();
```

## Passing options

Default [webpack-builder-plugin-html](/packages/webpack-builder-plugin-html) options and we are also using base [html-webpack-template](https://www.npmjs.com/package/html-webpack-template) template (`HtmlWebpackTemplate` named value):

```ts
let htmlPluginOptions: HtmlWebpackPlugin.Options | undefined = {
    inject: false,
    template: HtmlWebpackTemplate,
    baseHref: "/",
    appMountIds: ["root"],
    meta: [
        {
            name: "viewport",
            content: "width=device-width, initial-scale=1"
        }
    ]
};
```

By giving any option it will fully override default options. It is wrapped [html-webpack-plugin](https://www.npmjs.com/package/html-webpack-plugin). All options you can pass from the wrapped package.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const htmlPlugin = require("@reactway/webpack-builder-plugin-html");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(htmlPlugin, {
        title: 'Custom template',
        template: 'index.html',
        ...
    }})
    .toConfig();
```

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder-plugin-images
Description: A plugin made for webpack-builder.
Latest version: 2.0.4

# @reactway/webpack-builder-plugin-images

A plugin made for webpack-builder.

## Getting started

```sh
$ npm i @reactway/webpack-builder-plugin-images
```

Add plugin into webpack config by using `use()` builder method.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const images = require("@reactway/webpack-builder-plugin-images");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(images)
    .toConfig();
```

## Passing options

Options you can pass:

```ts
interface ImageLoaderOptions {
    limit: string | number;
    sourceMap: boolean;
    optimizeInDev: boolean;
    optimization: ImagesOptimization;
    outputFolder: string;
}
```

More details about `@reactway/image-loader` options you can read [@reactway/image-loader options](https://github.com/reactway/webpack-builder/tree/dev/packages/image-loader#passing-options).

```js
const webpackBuilder = require("@reactway/webpack-builder");
const images = require("@reactway/webpack-builder-plugin-images");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(images, {
        limit:1000
        ...
    })
    .toConfig();
```

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder-plugin-styles
Description: A plugin made for webpack-builder.
Latest version: 2.0.4

# @reactway/webpack-builder-plugin-styles

A plugin made for webpack-builder.

## Getting started

```sh
$ npm i @reactway/webpack-builder-plugin-styles
```

Add plugin into webpack config by using `use()` builder method.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const styles = require("@reactway/webpack-builder-plugin-styles");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(styles.StylesPlugin)
    .toConfig();
```

## Passing options

By giving any option it will fully override that default options. All loaders have `LoaderOptions` type that are `Webpack.RuleSetLoader` without `loader` field. At the moment only `url-loader`, field `options` have default options.

```ts
const baseUrlLoaderOptions = {
    name: `${fontsOutputLocation}/[name].[ext]`,
    publicPath: fontsPublicPath,
    limit: 10000
};
```

`fontsOutputLocation` and `fontsPublicPath` can be passed through by options. If it is not given then it will have default values:

```ts
const fontsOutputLocation: string = "./assets/fonts";
const fontsPublicPathF: string = "./";
```

And base use case.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const styles = require("@reactway/webpack-builder-plugin-styles");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(StylesPlugin, {
        sassLoaderOptions: {
            options: {
                includePaths: ["absolute/path/a", "absolute/path/b"]
            }
        },
        ...
    })
    .toConfig();
```

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder-plugin-typescript
Description: A plugin made for webpack-builder.
Latest version: 2.0.4

# @reactway/webpack-builder-plugin-typescript

A plugin made for webpack-builder.

## Getting started

```sh
$ npm i @reactway/webpack-builder-plugin-typescript
```

Add plugin into webpack config by using `use()` builder method.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const typeScript = require("@reactway/webpack-builder-plugin-typescript");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(typeScript.TypeScriptPlugin)
    .toConfig();
```

Works well with `react typescript` version. If you are planning to use `json` be sure add

```json
"linterOptions": {
    "exclude": [
      "*.json",
      "**/*.json"
    ]
  }
```

at `tslint.json` file.

## Passing options

It have wrapped [fork-ts-checker-webpack-plugin](https://www.npmjs.com/package/fork-ts-checker-webpack-plugin) and [tsconfig-paths-webpack-plugin](https://www.npmjs.com/package/tsconfig-paths-webpack-plugin). You can pass both plugin options separate.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const typeScript = require("@reactway/webpack-builder-plugin-typescript");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(typeScript.TypeScriptPlugin, {
        forkTsCheckerOptions: {
            formatter: "codeframe",
            silent: true,
            ...
        },
        ...
    })
    .toConfig();
```

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder-plugin-web-dev
Description: A plugin made for webpack-builder.
Latest version: 2.0.4

# @reactway/webpack-builder-plugin-web-dev

A plugin made for webpack-builder. Plugin that provides a development server that gives live reloading and should be used **only** for **development**.

## Getting started

```sh
$ npm i @reactway/webpack-builder-plugin-web-dev
```

Add plugin into webpack config by using `use()` builder method.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const webpackDevServer = require("@reactway/webpack-builder-plugin-web-dev");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(webpackDevServer)
    .toConfig();
```

## Passing options

By giving any option it will fully override default options.

```ts
let webDevServer: WebpackDevServer.Configuration | undefined = {
    contentBase: "./dist",
    compress: true,
    host: "0.0.0.0",
    quiet: false,
    port: 3000,
    historyApiFallback: true
};
```

It is wrapped [webpack-dev-server](https://www.npmjs.com/package/webpack-dev-server). All options you can pass from the wrapped package. Available options you can check at [webpack-dev-server-options](https://webpack.js.org/configuration/dev-server/#devserver).

```js
const webpackBuilder = require("@reactway/webpack-builder");
const webpackDevServer = require("@reactway/webpack-builder-plugin-web-dev");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(webpackDevServer, {
        port: 3001,
        quiet: true,
        ...
    })
    .toConfig();
```

Suggest using `@reactway/webpack-builder-plugin-web-dev` together with `@reactway/webpack-builder-plugin-html`.

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactway/webpack-builder-plugin-write-file
Description: A plugin made for webpack-builder.
Latest version: 2.0.4

# @reactway/webpack-builder-plugin-write-file

A plugin made for webpack-builder.

## Getting started

```sh
$ npm i @reactway/webpack-builder-plugin-write-file
```

Add plugin into webpack config by using `use()` builder method.

```js
const webpackBuilder = require("@reactway/webpack-builder");
const writeFile = require("@reactway/webpack-builder-plugin-write-file");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(writeFile)
    .toConfig();
```

## Passing options

It is wrapped [write-file-webpack-plugin](https://www.npmjs.com/package/write-file-webpack-plugin). All options you can pass from the wrapped package. Available options you can check at [write-file-webpack-plugin-options](https://www.npmjs.com/package/write-file-webpack-plugin#api)

```ts
interface WriteFilePluginOptions {
    [key: string]: any;
}
```

```js
const webpackBuilder = require("@reactway/webpack-builder");
const writeFile = require("@reactway/webpack-builder-plugin-write-file");

module.exports = new webpackBuilder.Builder(__dirname, {
    entry: "./src/app.js",
    output: {
        path: "./dist",
        filename: "[name].bundle.js"
    }
})
    .use(writeFile, {
        test: /\.css$/,
        useHashIndex: true
    })
    .toConfig();
```

## Documentation

WIP

## License

Released under the [MIT license](LICENSE).
npm package: @reactx-hooks/extension
Description: A collection of useful React hooks for managing complex state
Latest version: 1.0.5

# @reactx-hooks/extension

A collection of useful React hooks for managing complex state.

## Installation

```bash
npm install @reactx-hooks/extension
# or
yarn add @reactx-hooks/extension
# or
bun add @reactx-hooks/extension
```

## Usage

### useModel

`useModel` is a powerful hook for managing complex state objects with deep nesting. It provides a simple API for updating nested objects while maintaining immutability.

```typescript
import { useModel } from '@reactx-hooks/extension';

interface User {
  name: string;
  age: number;
  address: {
    city: string;
    country: string;
    location: {
      latitude: number;
      longitude: number;
    };
  };
}

function UserProfile() {
  const [user, setUser, resetUser] = useModel<User>({
    initialValue: {
      name: 'John Doe',
      age: 30,
      address: {
        city: 'London',
        country: 'UK',
        location: {
          latitude: 51.5074,
          longitude: -0.1278
        }
      }
    }
  });

  // Update nested values
  const updateCity = () => {
    setUser({
      address: {
        city: 'New York'
      }
    });
  };

  // Function updates
  const updateLocation = () => {
    setUser(prev => ({
      address: {
        location: {
          latitude: prev.address.location.latitude + 1,
          longitude: prev.address.location.longitude + 1
        }
      }
    }));
  };

  return (
    <div>
      <h1>{user.name}</h1>
      <p>City: {user.address.city}</p>
      <button onClick={updateCity}>Update City</button>
      <button onClick={updateLocation}>Update Location</button>
      <button onClick={resetUser}>Reset</button>
    </div>
  );
}
```

### Features

- Deep nested object updates
- Type-safe with TypeScript
- Optional initial value
- State change callback
- Reset functionality
- Immutable updates
- Partial updates support

### API

```typescript
function useModel<T extends object>(options?: {
  initialValue?: T;
  onStateChange?: (newState: T) => void;
}): [
  T,
  (updates: DeepPartial<T> | ((prevState: T) => DeepPartial<T>)) => void,
  () => void
];
```

#### Options

- `initialValue`: Optional initial state
- `onStateChange`: Optional callback that runs when state changes

#### Returns

- `[0]`: Current state
- `[1]`: Function to update state
- `[2]`: Function to reset state to initial value

## License

MIT