open-index/open-npm huggingface dataset:
npm package: @opentf/react-form
Description: A simple form state manager for React.
Author: Thanga Ganapathy
Latest version: 0.22.0

<img align="left" src="https://open-tech-foundation.pages.dev/img/Logo.svg" width="50" height="50">

&nbsp;[OPEN TECH FOUNDATION](https://open-tech-foundation.pages.dev/)

<div align="center">

# React Form

[![Build](https://github.com/open-tech-foundation/react-form/actions/workflows/build.yml/badge.svg)](https://github.com/open-tech-foundation/react-form/actions/workflows/build.yml)

</div>

> A simple form state manager for React.

# [Live Demo](https://react-form.pages.dev/#demo) | [Documentation](https://react-form.pages.dev/)

## Features

- Simple APIs to use

- Supports nested & array fields

- Supports form validation (Works with any schema validation lib)

- Render optimized

- TypeScript support

## Installation

```shell
npm install @opentf/react-form
```

```shell
yarn add @opentf/react-form
```

```shell
pnpm add @opentf/react-form
```

```shell
bun add @opentf/react-form
```

## Usage

```jsx
import { Form, Field } from '@opentf/react-form';

export default function App() {
  return (
    <Form
      initialValues={{ field1: '', field2: '' }}
      onSubmit={(values) => {
        console.log(values);
      }}
    >
      <Field name="field1" />
      <Field name="field2" type="number" />
      <button type="submit">Submit</button>
    </Form>
  );
}
```

## Examples

- [Basic Form](https://react-form.pages.dev/Examples/basic-form)

- [Material UI Form](https://react-form.pages.dev/Examples/mui-form)

- [Chakra UI Form](https://react-form.pages.dev/Examples/chakra-ui-form)

- [Yup Validations](https://react-form.pages.dev/Examples/yup-validations)

- [Zod Validations](https://react-form.pages.dev/Examples/zod-validations)

## License

Copyright (c) [Thanga Ganapathy](https://github.com/Thanga-Ganapathy) ([MIT License](../../LICENSE)).
npm package: @opentf/react-state
Description: A global state manager for ReactJS.
Author: Thanga Ganapathy
Latest version: 0.16.0

<img align="left" src="https://open-tech-foundation.pages.dev/img/Logo.svg" width="50" height="50">

&nbsp;[OPEN TECH FOUNDATION](https://open-tech-foundation.pages.dev/)

<div align="center">

# React State

[![Build](https://github.com/open-tech-foundation/react-state/actions/workflows/build.yml/badge.svg)](https://github.com/open-tech-foundation/react-state/actions/workflows/build.yml)

</div>

> A global state manager for React.

<div align="center">

# [View Demo](https://react-app-state.pages.dev/#demo) | [Documentation](https://react-app-state.pages.dev/)

</div>

## Features

- Simple API
- Mutable State Updates
- No Context Providers
- Auto Shallow Diff Computed Props
- TypeScript Support

## Installation

```shell
npm install @opentf/react-state
```

```shell
yarn add @opentf/react-state
```

```shell
pnpm add @opentf/react-state
```

```shell
bun add @opentf/react-state
```

## Usage

```jsx
import { create } from '@opentf/react-state';

const { useAppState, setAppState, api } = create({ count: 0 });

api.subscribe(console.log);

export default function App() {
  const count = useAppState((s) => s.count);

  return (
    <>
      <p>Count: {count}</p>
      <button
        onClick={() =>
          setAppState((s) => {
            s.count++;
          })
        }
      >
        Increment
      </button>
    </>
  );
}
```

## Related

- [@opentf/react-form](https://react-form.pages.dev/) - A simple form state manager for React.

- [@opentf/react-sandbox](https://github.com/Open-Tech-Foundation/react-sandbox) - The CodeSandbox sandpack wrapper with additional features.

- [@opentf/react-node-repl](https://node-repl.pages.dev/) - The Node.js REPL in a React component.

- [@opentf/std](https://js-std.pages.dev/) - An Extensive JavaScript Standard Library.

## License

Copyright (c) 2021, [Thanga Ganapathy](https://github.com/Thanga-Ganapathy) ([MIT License](../../LICENSE)).
npm package: @opentf/react-ta-input
Description: The Thamizhl (தமிழ்) language scripts input for ReactJS.
Author: Thanga Ganapathy
Latest version: 0.10.0

<img align="left" src="https://open-tech-foundation.pages.dev/img/Logo.svg" width="50" height="50">

&nbsp;[OPEN TECH FOUNDATION](https://open-tech-foundation.pages.dev/)

<div align="center">

# React Ta Input

![Virtual Keyboard](https://raw.githubusercontent.com/Open-Tech-Foundation/react-ta-input/main/assets/demo.gif)

</div>

> The Thamizhl (தமிழ்) language scripts input for ReactJS.

# [LIVE DEMO](https://react-ta-input.pages.dev/) | [DOCUMENTATION](https://react-ta-input.pages.dev/docs)

## Features

✅&nbsp; Simple API

✅&nbsp; It is based on the [ta-input-spec](https://github.com/Open-Tech-Foundation/ta-input-spec) specification

✅&nbsp; Virtual Keyboard

✅&nbsp; Easy switch between `ta` & `System` inputs methods

## Upcoming

⏳ Drag virtual keyboard

⏳ Virtual Keyboard size variants

⏳ Option to pick various signs

⏳ Keyboard shortcut to change input language

## Installation

```sh
npm install @opentf/react-ta-input
```

```sh
yarn add @opentf/react-ta-input
```

```sh
pnpm add @opentf/react-ta-input
```

```sh
bun add @opentf/react-ta-input
```

## Usage

```js
import { useRef } from "react";
import { TaInput } from "@opentf/react-ta-input";

export default function App() {
  const inputRef = useRef();

  const handleChange = (value) => {
    console.log(value);
  };

  return (
    <div>
      <TaInput inputRef={inputRef} onChange={handleChange}>
        <textarea ref={inputRef} rows={5} cols={50} />
      </TaInput>
    </div>
  );
}
```

## License

Copyright (c) [Thanga Ganapathy](https://github.com/Thanga-Ganapathy) ([MIT License](../../LICENSE))
npm package: @opentf/vue-input-mask
Description: The input mask directive for Vue.js.
Author: Thanga Ganapathy
Latest version: 0.9.1

<div align="center">

# Vue Input Mask

⚡ by [OPEN TECH FOUNDATION](https://open-tech-foundation.pages.dev/)

![](https://raw.githubusercontent.com/Open-Tech-Foundation/vue-input-mask/main/apps/website/public/demo.png)

</div>

[![Build](https://github.com/open-tech-foundation/vue-input-mask/actions/workflows/build.yml/badge.svg)](https://github.com/open-tech-foundation/vue-input-mask/actions/workflows/build.yml)

> The input mask directive for Vue.js.

## Demo

- [Native Input](https://vue-input-mask.pages.dev/demo/native-input/)

- [Vuetify](https://vue-input-mask.pages.dev/demo/vuetify/)

- [Element Plus](https://vue-input-mask.pages.dev/demo/element-plus/)

## Features

- Simple API

- Lightweight ~1.5 KB Gzipped

- RegExp Support

- Custom tokens

- Get raw/unmasked values via callback fn

## Installation

Using npm

```shell
npm install @opentf/vue-input-mask
```

Using Yarn

```shell
yarn add @opentf/vue-input-mask
```

Using pnpm

```shell
pnpm add @opentf/vue-input-mask
```

## Usage

```vue
<script setup>
import { vMask } from "@opentf/vue-input-mask";
</script>

<template>
  <input v-mask="{ mask: '#####' }" />
</template>
```

```
Default Tokens:

#  - Number only, [0-9]
$  - Char only, [A-Z, a-z]
*  - Number or Char, [a-z, A-Z, 0-9]
A  - Uppercase char [A-Z], transform: (c) => c.toLocaleUpperCase()
a  - Lowercase char [a-z], transform: (c) => c.toLocaleLowerCase()
\\ - Escape token, eg: \\$
{} - Regular expression, eg: {[A-F]}
```

## Documentation

Please visit [https://vue-input-mask.pages.dev](https://vue-input-mask.pages.dev/) to get started.

## License

Copyright (c) [Thanga Ganapathy](https://github.com/Thanga-Ganapathy) ([MIT License](../../LICENSE)).