open-index/open-npm huggingface dataset:
npm package: @reunified/hast-util-sanitize
Description: Modern rewrite of hast-util-sanitize
Latest version: 1.0.1

# hast-util-sanitize

> Modern rewrite of [hast-util-sanitize][link]

[**hast**][hast] utility to sanitize a [_tree_][tree].

## Install

```sh
pnpm i @reunified/hast-util-sanitize
```

## API

See [original package README][link].

[hast]: https://github.com/syntax-tree/hast
[tree]: https://github.com/syntax-tree/unist#tree
[link]: https://github.com/syntax-tree/hast-util-sanitize
npm package: @reunified/trough
Description: Modern rewrite of trough
Latest version: 1.0.3

# @reunified/trough

> Modern rewrite of [trough][link]

trough is like ware with less sugar, and middleware functions can change the input of the next.

More info in [original package readme][link].

## Install

```sh
pnpm i @reunified/trough
```

[link]: https://github.com/wooorm/trough
npm package: @reunified/vfile
Description: Modern rewrite of vfile
Latest version: 1.0.2

# @reunified/vfile

> Modern rewrite of [vfile][link]

vfile is a virtual file system.

More info in [original package readme][link].

## Install

```sh
pnpm i @reunified/vfile
```

[link]: https://github.com/vfile/vfile
npm package: @reus-able/vite-plugin-qiankun
Description: vite for qiankun
Author: markteng
Latest version: 1.0.15

#### 简介

> vite-plugin-qiankun: 帮助应用快速接入乾坤的vite插件

- 保留vite构建es模块的优势
- 一键配置，不影响已有的vite配置
- 支持vite开发环境

#### 快速开始

###### 1、在 `vite.config.ts` 中安装插件
```typescript
// vite.config.ts

import qiankun from 'vite-plugin-qiankun';

export default {
  // 这里的 'myMicroAppName' 是子应用名，主应用注册时AppName需保持一致
  plugins: [qiankun('myMicroAppName')],
  // 生产环境需要指定运行域名作为base
  base: 'http://xxx.com/'
}
```
###### 2、在入口文件里面写入乾坤的生命周期配置

```typescript
// main.ts
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

// some code
renderWithQiankun({
  mount(props) {
    console.log('mount');
    render(props);
  },
  bootstrap() {
    console.log('bootstrap');
  },
  unmount(props: any) {
    console.log('unmount');
    const { container } = props;
    const mountRoot = container?.querySelector('#root');
    ReactDOM.unmountComponentAtNode(
      mountRoot || document.querySelector('#root'),
    );
  },
});

if (!qiankunWindow.__POWERED_BY_QIANKUN__) {
  render({});
}
```

###### 3、dev下作为子应用调试

> 因为开发环境作为子应用时与热更新插件（可能与其他修改html的插件也会存在冲突）有冲突，所以需要额外的调试配置

```typescript
// useDevMode 开启时与热更新插件冲突,使用变量切换
const useDevMode = true

const baseConfig: UserConfig = {
  plugins: [
    ...(
      useDevMode ? [] : [
        reactRefresh()
      ]
    ),
    qiankun('viteapp', {
      useDevMode
    })
  ],
}
```
上面例子中 `useDevMode = true` 则不使用热更新插件，`useDevMode = false` 则能使用热更新，但无法作为子应用加载。

###### 4、其它使用注意点 `qiankunWindow`

因为es模块加载与`qiankun`的实现方式有些冲突，所以使用本插件实现的`qiankun`微应用里面没有运行在js沙盒中。所以在不可避免需要设置window上的属性时，尽量显示的操作js沙盒，否则可能会对其它子应用产生副作用。qiankun沙盒使用方式
```typescript
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper';

qiankunWindow.customxxx = 'ssss'

if (qiankunWindow.__POWERED_BY_QIANKUN__) {
  console.log('我正在作为子应用运行')
}

```

#### 例子

详细的信息可以参考例子里面的使用方式
 ```
git clone xx
npm install
npm run example:install
# 生产环境调试demo
npm run example:start
# vite开发环境demo, demo中热更新已经关闭
npm run example:start-vite-dev
```
npm package: @reusable-web/data-table
Description: data-table
Author: Lloyd Brookes
Latest version: 0.2.2

[![view on npm](https://badgen.net/npm/v/@reusable-web/data-table)](https://www.npmjs.org/package/@reusable-web/data-table)
[![npm module downloads](https://badgen.net/npm/dt/@reusable-web/data-table)](https://www.npmjs.org/package/@reusable-web/data-table)
[![Gihub repo dependents](https://badgen.net/github/dependents-repo/reusable-web/data-table)](https://github.com/reusable-web/data-table/network/dependents?dependent_type=REPOSITORY)
[![Gihub package dependents](https://badgen.net/github/dependents-pkg/reusable-web/data-table)](https://github.com/reusable-web/data-table/network/dependents?dependent_type=PACKAGE)
[![Build Status](https://travis-ci.org/reusable-web/data-table.svg?branch=master)](https://travis-ci.org/reusable-web/data-table)
[![Coverage Status](https://coveralls.io/repos/github/reusable-web/data-table/badge.svg)](https://coveralls.io/github/reusable-web/data-table)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/feross/standard)

# @reusable-web/data-table

***Project and documentation are a WIP***

Variables 

```css
:root {
  --data-table-border-colour: silver;
  --data-table-cell-padding: 0.5em;
  --data-table-header-bg-colour;
  --data-table-header-colour;
```

Examples

```js
$('data-table[one]').setData([
    { one: 1, two: 2, three: false },
    { one: 10, two: 20, three: true },
  ],
  {
    columnOptions: [
      {
        column: 'one'
      },
      {
        column: 'two'
      },
      {
        column: 'three',
        input: 'checkbox'
      },
    ]
  }
)

$('data-table[editable]').setData([
    { one: 1, three: false },
    { one: 10, three: true },
  ],
  {
    columnOptions: [
      {
        column: 'one',
        editable: true
      },
      {
        column: 'three',
        input: 'checkbox'
      }
    ]
  }
)

$('data-table[action]').setData([
    { one: 1, button: 'select' },
    { one: 10, button: 'select'},
  ],
  {
    columnOptions: [
      {
        column: 'one',
        editable: true
      },
      {
        column: 'button',
        action: 'select',
        actionDisabledIf: (row) => row.one === 10
      }
    ]
  }
)

$('data-table[css]').setData([
    { one: 1, two: 2, three: false },
    { one: 10, two: 20, three: true },
  ],
  {
    columnOptions: [
      {
        column: 'one'
      },
      {
        column: 'two'
      },
      {
        column: 'three',
        input: 'checkbox'
      },
    ]
  }
)
```
npm package: @reusable-web/page-header
Description: page-header
Author: Lloyd Brookes
Latest version: 0.4.0

[![view on npm](https://badgen.net/npm/v/@reusable-web/page-header)](https://www.npmjs.org/package/@reusable-web/page-header)
[![npm module downloads](https://badgen.net/npm/dt/@reusable-web/page-header)](https://www.npmjs.org/package/@reusable-web/page-header)
[![Gihub repo dependents](https://badgen.net/github/dependents-repo/reusable-web/page-header)](https://github.com/reusable-web/page-header/network/dependents?dependent_type=REPOSITORY)
[![Gihub package dependents](https://badgen.net/github/dependents-pkg/reusable-web/page-header)](https://github.com/reusable-web/page-header/network/dependents?dependent_type=PACKAGE)
[![Build Status](https://travis-ci.org/reusable-web/page-header.svg?branch=master)](https://travis-ci.org/reusable-web/page-header)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/feross/standard)

# @reusable-web/page-header

Standard page navigation. Supports relative URLs.

```html
<head>
  <script type="module" src="./node_modules/@reusable-web/page-header/index.js"></script>
  <style>
    page-header {
      --page-header-logo-height: 3em; /* height and width default to 2em */
      --page-header-logo-width: 3em;
      --page-header-logo-gutter: 0.5em;
      --page-header-title-font: 1.5em sans-serif;
    }
  </style>
</head>

<page-header data-logo-url="/">
  <img slot="logo" src="./img/logo.png"></img>
  <a href="/" slot="title">Header title</a>
  <a href="/" slot="nav">Nav slot 1</a>
  <a href="/" slot="nav">Nav slot 2</a>
  <a href="/" slot="nav">Nav slot 3</a>
</page-header>
```

* * *

&copy; 2021-22 Lloyd Brookes \<75pound@gmail.com\>.
npm package: @reusable-web/sw-cache
Description: sw-cache
Author: Lloyd Brookes
Latest version: 0.2.0

[![view on npm](https://badgen.net/npm/v/@reusable-web/sw-cache)](https://www.npmjs.org/package/@reusable-web/sw-cache)
[![npm module downloads](https://badgen.net/npm/dt/@reusable-web/sw-cache)](https://www.npmjs.org/package/@reusable-web/sw-cache)
[![Gihub repo dependents](https://badgen.net/github/dependents-repo/reusable-web/sw-cache)](https://github.com/reusable-web/sw-cache/network/dependents?dependent_type=REPOSITORY)
[![Gihub package dependents](https://badgen.net/github/dependents-pkg/reusable-web/sw-cache)](https://github.com/reusable-web/sw-cache/network/dependents?dependent_type=PACKAGE)
[![Build Status](https://travis-ci.org/reusable-web/sw-cache.svg?branch=master)](https://travis-ci.org/reusable-web/sw-cache)
[![Coverage Status](https://coveralls.io/repos/github/reusable-web/sw-cache/badge.svg)](https://coveralls.io/github/reusable-web/sw-cache)
[![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg)](https://github.com/feross/standard)

# @reusable-web/sw-cache

Create a file called `sw.js` in the root folder of the project. This is significant since it sets the serviceworker scope to the root of the project.

```js
importScripts('/node_modules/@reusable-web/sw-cache/sw.js')

```

Register the project serviceworker. 

```js
import SwCache from '/node_modules/@reusable-web/sw-cache/index.js'

const swCache = new SwCache()
swCache.register('/sw.js')
```

* * *

&copy; 2021-22 Lloyd Brookes \<75pound@gmail.com\>.

Tested by [test-runner](https://github.com/test-runner-js/test-runner).
npm package: @reuseely/styles
Description: reuseely styling solution
Author: Lazar Eric
Latest version: 0.0.2

# @reuseely/styles

reuseely styling solution.

## Installation

Install the package in your project directory with:

```sh
// with npm
npm install @reuseely/styles

// with yarn
yarn add @reuseely/styles
```

## Documentation

[The documentation]()
npm package: @reusejs/lp
Description: Approach 1:
Author: Shubham Joshi
Latest version: 0.0.82

Approach 1:

LOS App (Web/Mobile) -> LOS Backend -> API Endpoint (Story) -> LP SDK (Exported Function)

Approach 2:

- LOS App (Web/Mobile) -> LOS Backend (API of LP SDK)
- LOS Backend exposed APIs of LP SDK

Internal Implementation of LP SDK:

- Call executeActionInternally of Locospec
- Use Hooks to manage Lifecycle etc.,
npm package: @reusejs/react
Description: [![React Storybook][view-storybook-image]][view-storybook-url] [![NPM version][npm-version-image]][npm-url] [![NPM downloads][npm-downloads-image]][npm-downloads-url] [![MIT License][license-image]][license-url] [![NPM Publish][npm-publish-action-image]][
Author: Rajiv Seelam
Latest version: 6.21.4

[![React Storybook][view-storybook-image]][view-storybook-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-downloads-url]
[![MIT License][license-image]][license-url]
[![NPM Publish][npm-publish-action-image]][npm-publish-action-url]

### How to Contribute?

This repo consists of two packages:

1. apps/docs
   - This is used heavily in local development to view/test components as a component is being developed
2. packages/react
   - This contains all the utils/components and styles

Follow these steps to run the code and start development:

1. Run `yarn dev`
2. Go into react directory: `cd packages/react` and run `yarn build -w`
3. Carry on with your development

### Publishing

1. Run `yarn changeset` -> Generate your changelogs
2. Push to Github
3. Github Action Workflow will handle from there on

### Maintain

Run `git push --follow-tags` for all tags to be pushed to Github

### Credits:

- https://leerob.io/blog/turborepo-design-system-monorepo
- https://github.com/LukasBombach/tree-shakable-component-library

## License

@reusejs/react is freely distributable under the terms of the [MIT license][license-url].

[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE
[npm-url]: https://npmjs.org/package/@reusejs/react
[npm-version-image]: https://img.shields.io/npm/v/@reusejs/react.svg?style=flat
[npm-downloads-image]: https://img.shields.io/npm/dm/@reusejs/react.svg?style=flat
[npm-downloads-url]: https://npmcharts.com/compare/@reusejs/react?minimal=true
[npm-publish-action-image]: https://github.com/reusejs/react/actions/workflows/release.yml/badge.svg
[npm-publish-action-url]: https://github.com/reusejs/react/actions/workflows/release.yml
[view-storybook-image]: https://img.shields.io/badge/View-Storybook-F59E0B.svg
[view-storybook-url]: https://react.reusejs.org
npm package: @reusejs/react-components
Description: React components for admonitions
Author: Sam Robbins
Latest version: 3.1.8

# Admonition components

React components for admonitions

## Definition

```jsx
<Definition name="Definition name">

Definition text

</Definition>
```

This will generate a component that looks like this 

![Definition](https://res.cloudinary.com/samrobbins/image/upload/v1602436048/notes/definition_nisu7f.png)

## Corollary

I've never needed to add a title, so this just takes a child

```jsx
<Corollary>

Definition text

</Corollary>
```

Which looks like this:

![Corollary](https://res.cloudinary.com/samrobbins/image/upload/v1602436233/notes/corollary_hyzvmi.png)

## Example

The example component keeps the main text hidden until you toggle it. This keeps the amount of text on the page down, while allowing for more detail

```jsx
<Example title="Title">

Content

</Example>
```

Closed this looks like:

![Example Close](https://res.cloudinary.com/samrobbins/image/upload/v1602438447/notes/example_close_k1rocp.png)

Then on pressing the toggle it looks like:

![Example Open](https://res.cloudinary.com/samrobbins/image/upload/v1602438446/notes/example_open_wuspk2.png)

# Important

Important is for important notes, so doesn't take a title

```jsx
<Important>

An important note

</Important>
```

This looks like this:

![Important](https://res.cloudinary.com/samrobbins/image/upload/v1602438584/notes/important_zbljhl.png)

# Lemma

This doesn't have a title, but might need one at some point, raise an issue if it's required

Implemented like this

```jsx
<Lemma>

Lemma text

</Lemma>
```

![Lemma](https://res.cloudinary.com/samrobbins/image/upload/v1602438712/notes/lemma_q2lk8i.png)

# Problem

This is defined differently to the others, as all decision problems follow the same structure

```jsx
<Problem name="k-colourability" instance="A graph G" question="Is there a colouring of G using at most k colours?"/>
```

And looks like this:

![Problem](https://res.cloudinary.com/samrobbins/image/upload/v1602438851/notes/problem_wxobt3.png)

# Theorem

Theorem has the option of `name` for adding a title, and takes the main content as a child like so:

```jsx
<Theorem name="Theorem name">

Theorem content

</Theorem>
```

And looks like this:

![Theorem](https://res.cloudinary.com/samrobbins/image/upload/v1602439796/notes/theorem_qyxdiz.png)
npm package: @reusejs/react-editable-text
Description: React editable text input is a component that converts your text into editable content when clicked on the text
Author: Sowmya
Latest version: 0.0.5

# react-editable-text

React editable text input is a component that converts your text into editable content when clicked on the text.

###### npm installation

```
npm install @reusejs/react-editable-text
```

## Usage

Follow up the below steps to use react editable text package:

```
import EditableCustomInput from "@reusejs/react-editable-text";

export default function App() {
  const [edit, setEdit] = useState(false);
  const [value, setValue] = useState("Default Text");

  const handleEdit = () => {
    setEdit(true);
  };

  const save = (val) => {
    setValue(val);
    setEdit(false);
  };

  const close = () => {
    setEdit(false);
  };

  return (
    <>
      {!edit ? (
        <p onClick={handleEdit}>{value}</p>
      ) : (
        <EditableCustomInput
          defaultValue={value}
          saveText={save}
          cancelEdit={close}
        />
      )}
    </>
  );
}

```

###### Props/Attributes used

```
1. defaultValue
2. saveText
3. cancelEdit
4. checkIcon
5. closeIcon
6. className
7. customStyles
```
npm package: @reusejs/react-native-buttons
Description: A library which works as a base to build react components and push to npm
Author: Rajiv Seelam
Latest version: 0.0.3

[![Join Discord][join-discord-image]][join-discord-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-downloads-url]
[![MIT License][license-image]][license-url]
[![NPM Publish][npm-publish-action-image]][npm-publish-action-url]

# React Native Component Template

This is a sample repository which can be used to develop new component libraries and push to NPM. Tailwind is integrated and purge is configured. So, when you make a final build, CSS would be send along with package.

### Where to write components?

1. There is a `src` folder where you can write your components
2. Whichever components you want to be exposed would go into: `index.js`

## Workflow

### Storybook

- Run: `yarn storybook` and `yarn ios` or `yarn android` which will run the storybook in your localhost
- Open `storybook/stories/Box/Box.stories.js` to find an example of Storybook
- When you write your own component, also write a `.stories.jsx` and storybook would pick it up

## Contributing

### New components

Hit us on discord on `ideas` channel. Propose your ideas, we will blow our brains out.

### To existing components

Right now we don't a lot of hard and fast rules. 

Just follow: https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow

Basically:

- Fork the component to which you want to contribute
- Make your changes, test it properly
- Raise a Pull Request

## Releases

Once your pull request is made, a release would be schedule which will push the library to npm to @reusejs org. You can't push to reusejs org.
 
## License

react-native-component-template is freely distributable under the terms of the [MIT license][license-url].

[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE

[npm-url]: https://npmjs.org/package/@reusejs/react-native-buttons
[npm-version-image]: https://img.shields.io/npm/v/@reusejs/react-native-buttons.svg?style=flat

[npm-downloads-image]: https://img.shields.io/npm/dm/@reusejs/react-native-buttons.svg?style=flat
[npm-downloads-url]: https://npmcharts.com/compare/@reusejs/react-native-buttons?minimal=true

<!-- [view-storybook-image]: https://img.shields.io/badge/View-Storybook-F59E0B.svg
[view-storybook-url]: https://master--617258d6729860003a3d6e10.chromatic.com -->

[join-discord-image]: https://img.shields.io/badge/Join-Discord-7389D8.svg
[join-discord-url]: https://discord.gg/VUa9SHvvDb

<!-- [storybook-action-image]: https://github.com/reusejs/react-native-buttons/actions/workflows/chromatic.yml/badge.svg
[storybook-action-url]: https://github.com/reusejs/react-native-buttons/actions/workflows/chromatic.yml -->

[npm-publish-action-image]: https://github.com/reusejs/react-native-buttons/actions/workflows/publish.yml/badge.svg
[npm-publish-action-url]: https://github.com/reusejs/react-native-buttons/actions/workflows/publish.yml
npm package: @reusejs/react-native-component-template
Description: A library which works as a base to build react components and push to npm
Author: Rajiv Seelam
Latest version: 0.0.4

[![Join Discord][join-discord-image]][join-discord-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-downloads-url]
[![MIT License][license-image]][license-url]
[![NPM Publish][npm-publish-action-image]][npm-publish-action-url]

# React Native Component Template

This is a sample repository which can be used to develop new component libraries and push to NPM. Tailwind is integrated and purge is configured. So, when you make a final build, CSS would be send along with package.

### Where to write components?

1. There is a `src` folder where you can write your components
2. Whichever components you want to be exposed would go into: `index.js`

## Workflow

### Storybook

- Run: `yarn storybook` and `yarn ios` or `yarn android` which will run the storybook in your localhost
- Open `storybook/stories/Box/Box.stories.js` to find an example of Storybook
- When you write your own component, also write a `.stories.jsx` and storybook would pick it up

## Contributing

### New components

Hit us on discord on `ideas` channel. Propose your ideas, we will blow our brains out.

### To existing components

Right now we don't a lot of hard and fast rules. 

Just follow: https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow

Basically:

- Fork the component to which you want to contribute
- Make your changes, test it properly
- Raise a Pull Request

## Releases

Once your pull request is made, a release would be schedule which will push the library to npm to @reusejs org. You can't push to reusejs org.
 
## License

react-native-component-template is freely distributable under the terms of the [MIT license][license-url].

[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE

[npm-url]: https://npmjs.org/package/@reusejs/react-native-component-template
[npm-version-image]: https://img.shields.io/npm/v/@reusejs/react-native-component-template.svg?style=flat

[npm-downloads-image]: https://img.shields.io/npm/dm/@reusejs/react-native-component-template.svg?style=flat
[npm-downloads-url]: https://npmcharts.com/compare/@reusejs/react-native-component-template?minimal=true

<!-- [view-storybook-image]: https://img.shields.io/badge/View-Storybook-F59E0B.svg
[view-storybook-url]: https://master--617258d6729860003a3d6e10.chromatic.com -->

[join-discord-image]: https://img.shields.io/badge/Join-Discord-7389D8.svg
[join-discord-url]: https://discord.gg/VUa9SHvvDb

<!-- [storybook-action-image]: https://github.com/reusejs/react-native-component-template/actions/workflows/chromatic.yml/badge.svg
[storybook-action-url]: https://github.com/reusejs/react-native-component-template/actions/workflows/chromatic.yml -->

[npm-publish-action-image]: https://github.com/reusejs/react-native-component-template/actions/workflows/publish.yml/badge.svg
[npm-publish-action-url]: https://github.com/reusejs/react-native-component-template/actions/workflows/publish.yml
npm package: @reusejs/react-native-text-inputs
Description: A library which works as a base to build react components and push to npm
Author: Rajiv Seelam
Latest version: 0.0.7

[![Join Discord][join-discord-image]][join-discord-url]
[![NPM version][npm-version-image]][npm-url]
[![NPM downloads][npm-downloads-image]][npm-downloads-url]
[![MIT License][license-image]][license-url]
[![NPM Publish][npm-publish-action-image]][npm-publish-action-url]

# React Native Component Template

This is a sample repository which can be used to develop new component libraries and push to NPM. Tailwind is integrated and purge is configured. So, when you make a final build, CSS would be send along with package.

### Where to write components?

1. There is a `src` folder where you can write your components
2. Whichever components you want to be exposed would go into: `index.js`

## Workflow

### Storybook

- Run: `yarn storybook` and `yarn ios` or `yarn android` which will run the storybook in your localhost
- Open `storybook/stories/Box/Box.stories.js` to find an example of Storybook
- When you write your own component, also write a `.stories.jsx` and storybook would pick it up

## Contributing

### New components

Hit us on discord on `ideas` channel. Propose your ideas, we will blow our brains out.

### To existing components

Right now we don't a lot of hard and fast rules. 

Just follow: https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow

Basically:

- Fork the component to which you want to contribute
- Make your changes, test it properly
- Raise a Pull Request

## Releases

Once your pull request is made, a release would be schedule which will push the library to npm to @reusejs org. You can't push to reusejs org.
 
## License

react-native-component-template is freely distributable under the terms of the [MIT license][license-url].

[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=flat
[license-url]: LICENSE

[npm-url]: https://npmjs.org/package/@reusejs/react-native-text-inputs
[npm-version-image]: https://img.shields.io/npm/v/@reusejs/react-native-text-inputs.svg?style=flat

[npm-downloads-image]: https://img.shields.io/npm/dm/@reusejs/react-native-text-inputs.svg?style=flat
[npm-downloads-url]: https://npmcharts.com/compare/@reusejs/react-native-text-inputs?minimal=true

<!-- [view-storybook-image]: https://img.shields.io/badge/View-Storybook-F59E0B.svg
[view-storybook-url]: https://master--617258d6729860003a3d6e10.chromatic.com -->

[join-discord-image]: https://img.shields.io/badge/Join-Discord-7389D8.svg
[join-discord-url]: https://discord.gg/VUa9SHvvDb

<!-- [storybook-action-image]: https://github.com/reusejs/react-native-text-inputs/actions/workflows/chromatic.yml/badge.svg
[storybook-action-url]: https://github.com/reusejs/react-native-text-inputs/actions/workflows/chromatic.yml -->

[npm-publish-action-image]: https://github.com/reusejs/react-native-text-inputs/actions/workflows/publish.yml/badge.svg
[npm-publish-action-url]: https://github.com/reusejs/react-native-text-inputs/actions/workflows/publish.yml
npm package: @reusejs/react-text-input
Description: React Text Input component is a complete form control including a label, input, help text and error text
Author: Sowmya
Latest version: 0.0.8

# react-text-input

React Text Input component is a complete form control including a label, input, prefix, suffix, help text and error text.

###### npm installation

```
npm install @reusejs/react-text-input
```

## Usage

Follow up the below steps to use react text input package:

```
import { InputGroup, TextInput } from "@reusejs/react-text-input";

export default function () {
	const [value, setValue] = useState("");

	return (
		<InputGroup>
			<InputGroup.Label>Label</InputGroup.Label>
			<InputGroup.Prepend>$</InputGroup.Prepend>
			<TextInput
				id="username"
				type="text"
				onChange={(e) => setValue(e.target.value)}
				value={value}
			/>
			<InputGroup.Append>.00</InputGroup.Append>
			<InputGroup.HelperText>This is a help text</InputGroup.HelperText>
			<InputGroup.ErrorText>This is a error text</InputGroup.ErrorText>
		</InputGroup>
	)
}
```

###### Props/Attributes used

###### For Label

```
1. for
2. className
3. styles
```

###### For Append/Prepend/HelperText/ErrorText

```
1. className
2. styles
```

###### For TextInput

```
1. id
2. type
3. placeholder
4. className
5. styles
6. onChnage
7. value
8. invalid
```
npm package: @reusejs/react-textarea-autogrow
Description: React Textarea which autogrows
Author: Sowmya
Latest version: 0.0.6

# React-Textarea-Autogrow

A solution for automatically growing textarea element on typing.

###### npm installation

```
npm install @reusejs/react-textarea-autogrow
```

## Usage

Follow up the below steps to use renderless react autogrow textarea package:

```
import { AutogrowTextarea } from "@reusejs/react-textarea-autogrow";

export default function () {
	const [value, setValue] = useState("");

	return (
		<AutogrowTextarea
			rows={1}
			placeholder="Please enter here..."
			onChange={(e) => setValue(e.target.value)}
			value={value}
		/>
	)
}
```

Or you can make use of the renderless functionality of the package as below:

```
import { UseAutoGrow } from "@reusejs/react-textarea-autogrow";

export default function ({ onChange, value }) {
	const textareaRef = useRef();
	const { handleChange } = UseAutoGrow(onChange, value, textareaRef);

	return (
		<textarea ref={textareaRef} onChange={handleChange} value={value} />;
	)
}
```

###### Props/Attributes used

```
1. rows
2. placeholder
3. onChange
4. value
5. styles
6. className
```
npm package: @reusekit/emitter
Description: ::: code-group
Author: Jove Jonovski
Latest version: 0.0.1

# @reusekit/emitter

## Installation

::: code-group

```bash [pnpm]
pnpm add @reusekit/emitter
```

```bash [yarn]
yarn add @reusekit/emitter
```

```bash [npm]
npm i @reusekit/emitter
```

:::
npm package: @reusekit/spfx
Description: A collection of tools for SharePoint Framework development
Author: Jove Jonovski
Latest version: 0.0.3

# @reusekit/spfx

## Installation

::: code-group

```bash [pnpm]
pnpm add @reusekit/spfx
```

```bash [yarn]
yarn add @reusekit/spfx
```

```bash [npm]
npm i @reusekit/spfx
```

:::


## Development

```ini
VITE_SITE_COLLECTION_URL=https://{tenant}.sharepoint.com/sites/{site}/
VITE_CLIENT_ID={guid}
VITE_TENANT_ID={guid/domain}
VITE_DEFAULT_SCOPES=https://{tenant}.sharepoint.com/.default
```
npm package: @reusekit/static
Description: Static data utilities
Author: Jove Jonovski
Latest version: 0.0.1

# @reusekit/static

## Installation

::: code-group

```bash [pnpm]
pnpm add @reusekit/static
```

```bash [yarn]
yarn add @reusekit/static
```

```bash [npm]
npm i @reusekit/static
```

:::
npm package: @reusekit/tsconfig
Description: A collection of tsconfig files for different typescript projects
Author: Jove Jonovski
Latest version: 0.0.1

# @reusekit/tsconfig

A collection of tsconfig files for different typescript projects

## Installation

::: code-group
```bash [pnpm]
pnpm add -D @reusekit/tsconfig
```

```bash [yarn]
yarn add -D @reusekit/tsconfig
```

```bash [npm]
npm i -D @reusekit/tsconfig
```
:::

## Usage

`tsconfig.json`

::: code-group
```json [Browser]
{
  "extends": "@reusekit/tsconfig",
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]
}
```

```json [React]
{
  "extends": "@reusekit/tsconfig/react",
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}
```

```json [React Native]
{
  "extends": "@reusekit/tsconfig/react-native",
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx"
  ]
}
```

```json [Vue]
{
  "extends": "@reusekit/tsconfig/vue",
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue"
  ]
}
```

```json [NodeJS]
{
  "extends": "@reusekit/tsconfig/node",
  "include": [
    "src/**/*.d.ts",
    "src/**/*.ts"
  ]
}
```