open-index/open-npm huggingface dataset:
npm package: @react-component-contrib/button
Description: React Component
Author: Shen Chang
Latest version: 1.1.0

# @react-component-contrib/button

React component button


## 📦 Installation

You must be React 16.8 or higher.

To use `@react-component-contrib/button` with your React app:

```bash
npm install --save @react-component-contrib/button
```


## 🔨 Usage

```JavaScript
import React from 'react';
import ReactDOM from 'react-dom';
import Button from '@react-component-contrib/button';

/**
 * By default, the component has no style.
 * Consider importing the stylesheet it comes with:
 *
 * import '@react-component-contrib/button/lib/index.css';
 *
 * If you use Less, you can import less files:
 *
 * import '@react-component-contrib/button/lib/index.less';
 */

function App() {
  return (
    <Button>Button</Button>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));
```


## 📝 API Reference

### Button

| Property | Description | Type | Default |
| -------- | ----------- | :--: | :-----: |
| prefixClassName | set prefix class | `string` | - |
| disabled | disabled state of button	 | `boolean` | `false` |
| htmlType | set the original html type of button, see: [HTML standard](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | `string` | `button` |
| href | redirect url of link button | `string` | - |
| target | same as target attribute of a, works when href is specified | `string` | - |
| block | option to fit button width to its parent width | `boolean` | `false` |
| text | set text button | `boolean` | `false` |
| onClick | set the handler to handle click event | `(event) => void` | - |

It accepts all props which native buttons support.

### ButtonGroup

| Property | Description | Type | Default |
| -------- | ----------- | :--: | :-----: |
| prefixClassName | set prefix class, the button class of the group will also change | `string` | - |


## 🐛 Issues

If you find a bug, please file an issue on [our issue tracker on GitHub](https://github.com/react-component-contrib/button/issues).


## 🏁 Changelog

Changes are tracked in the [CHANGELOG.md](https://github.com/react-component-contrib/button/blob/master/CHANGELOG.md).


## 📄 License

The component is available under the [MIT](https://github.com/react-component-contrib/button/blob/master/LICENSE) License.
npm package: @react-comps/message
Description: An awesome libary
Author: sunsunny
Latest version: 0.0.2

# Introduction

message popup tool

# Install

npm

```shell
npm install @react-comps/message
```

yarn

```shell
yarn add @react-comps/message
```

# Usage

```jsx
import message from '@react-comps/message';
import '@react-comps/message/dist/message.css';

// ...
const config = {
  // position
  place: 'top', // top | center | bottom
  distance: '50px', // 50px | 30% (When `place = center` don't can ignore)

  /**
   * css Text
   */
  cssText: 'background: rbga(0, 0, 0); color: red', // inline style
};

hasbtn.onclick = function () {
  message.show('bad request！', 5000, config);
}

configbtn.onclick = function() {
  message.updateConfiguration(config);
}

nobtn.onclick = function () {
  message.show('bad request!');
}
```

# API

## show

```js
message.show(
  content: string | number = '',
  duration: number = 2000,
  configuration: object = {
    place: 'center',
    distance: '50%',
  }
  );
```

## updateConfiguration

update global configuration

```js
const config = {
  // position
  place: 'top', // top | center | bottom
  distance: '50px', // 50px | 30% (When `place = center` don't can ignore)

  /**
   * css Text
   */
  cssText: 'background: rbga(0, 0, 0); color: red', // inline style
};

message.updateConfiguration(config);
```
npm package: @react-control/flow
Description: React components for extend jsx syntax.
Author: Ivan Reutenko
Latest version: 1.0.3

# [@react-control/flow](https://reutenkoivan.github.io/react-control-flow/) [![Made in Ukraine](https://img.shields.io/badge/made_in-ukraine-ffd700.svg?labelColor=0057b7)](https://stand-with-ukraine.pp.ua)

[![MIT License](https://img.shields.io/github/license/reutenkoivan/react-control-flow)](https://github.com/reutenkoivan/react-control-flow/blob/main/LICENSE)
[![npm](https://img.shields.io/npm/v/@react-control/flow)](https://www.npmjs.com/package/@react-control/flow)
[![JSR](https://jsr.io/badges/@react-control/flow)](https://jsr.io/@react-control/flow)
[![open issues](https://img.shields.io/github/issues/reutenkoivan/react-control-flow.svg)](https://github.com/reutenkoivan/react-control-flow/issues)

- [Installation](#installation)
- [Provided components](#provided-components)
  - [Show](#show)
  - [For](#for)
  - [SwitchMap](#SwitchMap)

## Installation:

```bash
npm add @react-control/flow
```

```bash
yarn add @react-control/flow
```

```bash
bun add @react-control/flow
```

## Provided components:

### Show

```tsx
import { ReactNode, FC } from 'react'

type TruthyValue<T> = NonNullable<Exclude<T, false | 0>>

export type ShowProps<T> = {
  when: T
  fallback?: ReactNode | ReactNode[]
  children: FC<TruthyValue<T>> | ReactNode | ReactNode[]
}
```

### For

Component that renders `children` for each item in the `of` prop.
This component is similar to `Array.prototype.map` method.

```tsx
import { ReactNode } from 'react'

type OrNull<T> = T | null

export type ForProps<T> = {
  of: OrNull<T[] | readonly T[]>
  children: (item: T, index?: number) => ReactNode | ReactNode[]
  keyMapper?: (item: T, index?: number) => string | number
  loading?: boolean
  slots?: {
    loading?: ReactNode | ReactNode[]
    empty?: ReactNode | ReactNode[]
  }
}
```

### SwitchMap

Conditional rendering component that renders some of the `children` depending on the `case` prop.
Also, you can use `default` prop to render something while `case` is not equal to any `key` of the `children` object.

```tsx
import { ReactNode } from 'react'

type SwitchMapProps<T extends string> = {
  case: T
  default?: ReactNode | ReactNode[]
  children: Partial<Record<T, ReactNode | ReactNode[]>>
}
```
npm package: @react-corekit/sleep
Description: Async/await timeout delay
Author: glongh
Latest version: 1.1.0

# @react-corekit/sleep

> Non blocking asynchronous sleep.
> Due the nature of javascript an the event loop, it suspends the current function execution only. It does not pause the entire program execution.

[![NPM](https://img.shields.io/npm/v/@react-corekit/sleep.svg)](https://www.npmjs.com/package/@react-corekit/sleep)

## Install

```bash
npm install --save @react-corekit/sleep
```

```bash
yarn add @react-corekit/sleep
```

## Syntax

```js
await sleep(n);
// Do something
```

```js
sleep(n).then(() => {
  // Do something
});
```

## Usage

```js
import sleep from '@react-corekit/sleep';

async function run() {
  /* wait one second before 
      contitue this function execution */
  await sleep(1000);
}

run();
```

## Additional documentation

[The setTimeout() method](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout)

[Async functions - making promises friendly](https://developers.google.com/web/fundamentals/primers/async-functions)

[The basics of async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await)

## License

MIT © [glongh](https://github.com/glongh)
npm package: @react-corekit/use-idle
Description: Detecting when the user becomes inactive (idle) or active
Author: Gaston Longhitano
Latest version: 1.1.0

# @react-corekit/use-idle

> Detecting when the user becomes inactive (idle) or active.

[![NPM](https://img.shields.io/npm/v/@react-corekit/use-idle.svg)](https://www.npmjs.com/package/@react-corekit/use-idle) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @react-corekit/use-idle
```

```bash
yarn add @react-corekit/use-idle
```

## Usage

```jsx
import React from "react";

import { useIdle } from "@react-corekit/use-idle";

const Example = () => {
  const options = { timeToIdle: 1000 };
  const isIdle = useIdle(options);
  return <div>{isIdle ? "Are you still there?" : "Yes, you are here"}</div>;
};
```

**mousemove** event is ignored by default, to include it add the following line to the options object:

```javascript
const options = { ignoredEventsWhenIdle: [] };
```

### Advanced options

Activity detector allows you to configure some parameters:

- `timeToIdle`: number of milliseconds of inactivity which makes activity detector transition to 'idle' (`30000` by default)
- `activityEvents`: the user events which make activity detector transition from 'idle' to 'active'. The default list of activityEvents is `['click', 'mousemove', 'keydown', 'DOMMouseScroll', 'mousewheel', 'mousedown', 'touchstart', 'touchmove', 'focus']`
- `inactivityEvents`: the list of events which make the activity detector transition from 'active' to 'idle' without waiting for `timeToIdle` timeout. By default: `['blur']`
- `ignoredEventsWhenIdle`: list of events to ignore in idle state. By default: `['mousemove']`
- `initialState`: can be `"idle"` or `"active"` (`"active"` by default)

> Visit: https://react-corekit.github.io/use-idle/ for a minimalistic live demo (Including _mousemove_ event).

## Additional documentation

[Activity Detector Reference](https://github.com/tuenti/activity-detector/blob/master/README.md)

[Standard events Reference](https://developer.mozilla.org/en-US/docs/Web/Events#Standard_events)

## License

MIT © [glongh](https://github.com/glongh)
npm package: @react-corekit/use-interval
Description: React Hook implementation for setInterval()
Author: glongh
Latest version: 1.1.1

# @react-corekit/use-interval

> React Hook implementation for setInterval()

[![NPM](https://img.shields.io/npm/v/@react-corekit/use-interval.svg)](https://www.npmjs.com/package/@react-corekit/use-interval) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @react-corekit/use-interval
```

```bash
yarn add @react-corekit/use-interval
```

## Syntax

```js
useInterval(func, delay);
```

## Parameters

**func**

> A function to be executed every delay milliseconds. The function is not passed any arguments, and no return value is expected.

**delay**

> The time, in milliseconds (thousandths of a second), the timer should delay in between executions of the specified function.

## Usage

> Visit: https://react-corekit.github.io/use-interval/ for a minimalistic live demo.

```jsx
import React, { useState } from "react";

import { useInterval } from "@react-corekit/use-interval";

const Counter = () => {
  const [count, setCount] = useState(0);

  useInterval(() => {
    setCount(count + 1);
  }, 1000);

  return <h1>{count}</h1>;
};
```

### Pausing and Reseting the counter example

```jsx
const App = () => {
  const [delay] = useState(1000);
  const [count, setCount] = useState(0);
  const [isRunning, setIsRunning] = useState(true);

  useInterval(
    () => {
      setCount(count + 1);
    },
    isRunning ? delay : null
  );

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setIsRunning(!isRunning)}>
        {isRunning ? "Stop" : "Start"}
      </button>
    </div>
  );
};
```

## Additional documentation

[Window/GlobalScope setInterval Reference](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)

[Making setInterval Declarative with React Hooks](https://overreacted.io/making-setinterval-declarative-with-react-hooks/)

## Credits

Based on Dan Abramov's post "Making setInterval Declarative with React Hooks".

## License

MIT - [glongh](https://github.com/glongh)
npm package: @react-corekit/use-where
Description: Detects if the javascript is being loaded from a server (SSR) or a web client
Author: glongh
Latest version: 1.1.2

# @react-corekit/use-where

> React Hook that detects if the javascript is being loaded from a server (SSR) or a web client

[![NPM](https://img.shields.io/npm/v/@react-corekit/use-where.svg)](https://www.npmjs.com/package/@react-corekit/use-where) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save @react-corekit/use-where
```

```bash
yarn add @react-corekit/use-where
```

## Syntax

```js
const [isBrowser, isNode, isServer] = useWhere();
```

## Returns

**isBrowser**

> A function that detects if the code is being executed in a web browser.

**isServer**

> A function that detects if the code is being executed in a server (SSR - Server side rendering).

**isNode**

> A function that detects if the code is being executed in node environment (SSR - Server side rendering).

## Usage

> Visit: https://react-corekit.github.io/use-where/ for a minimalistic live demo

```jsx
import React from "react";

import { useWhere } from "@react-corekit/use-where";

const App = () => {
  const [isBrowser, isNode, isServer] = useWhere();
  return (
    <div>
      <div>
        Is browser? <strong>{isBrowser() ? "Yes" : "No"}</strong>
      </div>
      <div>
        Is node? <strong>{isNode() ? "Yes" : "No"}</strong>
      </div>
      <div>
        Is server? <strong>{isServer() ? "Yes" : "No"}</strong>
      </div>
    </div>
  );
};
export default App;
```

## Additional documentation

[Node's Globals Documentation](https://nodejs.org/api/globals.html)

[Window Object Reference](https://developer.mozilla.org/en-US/docs/Web/API/Window)

[React's ReactDomServer object Reference](https://reactjs.org/docs/react-dom-server.html)

## License

MIT © [glongh](https://github.com/glongh)
npm package: @react-cross/components
Description: [![npm version](https://badge.fury.io/js/@react-cross/components.svg)](http://badge.fury.io/js/@react-cross/components) [![npm total downloads](https://img.shields.io/npm/dt/@react-cross/components.svg)](https://img.shields.io/npm/dt/@react-cross/componen
Author: Hossein Mohammadi
Latest version: 0.4.0
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# @react-cross/components

[![npm version](https://badge.fury.io/js/@react-cross/components.svg)](http://badge.fury.io/js/@react-cross/components)
[![npm total downloads](https://img.shields.io/npm/dt/@react-cross/components.svg)](https://img.shields.io/npm/dt/@react-cross/components.svg)
[![npm monthly downloads](https://img.shields.io/npm/dm/@react-cross/components.svg)](https://img.shields.io/npm/dm/@react-cross/components.svg)
[![npm weekly downloads](https://img.shields.io/npm/dw/@react-cross/components.svg)](https://img.shields.io/npm/dw/@react-cross/components.svg)

React Native components for both mobile and web 
## TOC

* [Installation](#installation)
* [Initial](#Initial)

## Installation

using yarn:

```shell
yarn add @react-cross/components
```