open-index/open-npm huggingface dataset:
npm package: @react-colorpicker/reactcss
Description: Bringing Classes to Inline Styles
Author: case
Latest version: 1.0.0

# [ReactCSS](http://reactcss.com/)

[![Build Status][travis-svg]][travis-url]
[![dependency status][deps-svg]][deps-url]
[![dev dependency status][dev-deps-svg]][dev-deps-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]

## Inline Styles in JS with support for [React](http://reactcss.com/#react), [React Native](http://reactcss.com/#react-native), [Autoprefixing](http://reactcss.com/#autoprefixing), [Hover](http://reactcss.com/#hover), [Pseudo-Elements](http://reactcss.com/#pseudo-elements) & [Media Queries](http://reactcss.com/#media-queries)

## Install

```
npm install reactcss --save
```

## Style Object

Define a default styles for your elements:
```javascript
import reactCSS from 'reactcss'

const styles = reactCSS({
  'default': {
    card: {
      background: this.props.background,
      boxShadow: '0 2px 4px rgba(0,0,0,.15)',
    },
  },
})
```

Pass style definitions via inline styles:
```javascript
<div style={ styles.card } />
```

## Activating Classes

Activate additional classes by passing down objects as additional parameters to `reactCSS`:
```javascript
const styles = reactCSS({
  'default': {
    card: {
      background: '#fff',
      boxShadow: '0 2px 4px rgba(0,0,0,.15)',
    },
  },
  'zIndex-2': {
    card: {
      boxShadow: '0 4px 8px rgba(0,0,0,.15)',
    },
  },
}, {
  'zIndex-2': props.zIndex === 2,
})
```

## Documentation
See the [Full Documentation](http://reactcss.com)

## Examples

Examples and projects built with reactCSS:

[Felony](https://github.com/henryboldi/felony) - Next Level PGP Desktop App
[React Color](https://github.com/casesandberg/react-color) - Color Pickers from Sketch, Photoshop, Chrome, Github, Twitter & more
[Buffer App Components](https://www.npmjs.com/package/@bufferapp/components) - A shared set of UI Components
[React Reactions](https://github.com/casesandberg/react-reactions) - Use Reactions from Slack, Facebook, Pokemon, Github and Youtube


[travis-svg]: https://travis-ci.org/casesandberg/reactcss.svg
[travis-url]: https://travis-ci.org/casesandberg/reactcss
[deps-svg]: https://david-dm.org/casesandberg/reactcss.svg
[deps-url]: https://david-dm.org/casesandberg/reactcss
[dev-deps-svg]: https://david-dm.org/casesandberg/reactcss/dev-status.svg
[dev-deps-url]: https://david-dm.org/casesandberg/reactcss#info=devDependencies
[npm-badge-png]: https://nodei.co/npm/reactcss.png?downloads=true&stars=true
[license-image]: http://img.shields.io/npm/l/reactcss.svg
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/reactcss.svg
[downloads-url]: http://npm-stat.com/charts.html?package=reactcss
npm package: @react-comfy/hooks
Description: Handy hooks.
Author: Shota Fuji
Latest version: 0.2.0

# @react-comfy/hooks

Handy hooks.

## Installation

```sh
yarn add @react-comfy/hooks
# or
npm i @react-comfy/hooks
```

## Usage

Import hooks and use them in your components.

`@react-comfy/hooks` is transpiled to ES2015.
If you're targeting ES5, use `@react-comfy/hooks/esm/es5` (ESModule) or `@react-comfy/hooks/cjs/es5` (CommonJS) instead.

```tsx
// Example usage of useId
import * as React from 'react'
import { useId } from '@react-comfy/hooks'

export const MyComponent: React.FC = () => {
  const labelId = useId('my_component_label__')

  return (
    <div>
      <span id={labelId}>Description for input</span>
      <input aria-labelledby={labelId} />
    </div>
  )
}
```
npm package: @react-comfy/props
Description: A set of props typings in TypeScript.
Author: Shota Fuji
Latest version: 0.2.0

# @react-comfy/props

A set of props typings in TypeScript.

## Installation

```sh
yarn add -D @react-comfy/props
# or
npm i --save-dev @react-comfy/props
```

## Usage

Import typings and use them as props. You can combine props by using [intersection types](https://www.typescriptlang.org/docs/handbook/advanced-types.html#intersection-types).

```tsx
// Example usage of ControlledInputProps and StyleableProps
import * as React from 'react'
import { ControlledInputProps, StyleableProps } from '@react-comfy/props'

interface MyComponentProps {
  foo: 'bar'
}

export const MyComponent: React.FC<
  MyComponentProps & StyleableProps & ControlledInputProps
> = ({ foo, disabled, value, className, style, onChange, ...rest }) => {
  const change = React.useCallback<React.ChangeEventHandler<HTMLInputElement>>(
    ev => {
      if (onChange) {
        onChange(ev, ev.currentTarget.value)
      }
    },
    [onChange]
  )

  return (
    <div className={className} style={style} {...rest}>
      <input disabled={disabled} value={value} onChange={change} />
    </div>
  )
}
```
npm package: @react-comp/dialog
Description: React dialog component
Author: moonlit
Latest version: 1.2.3

# Introduction

dialog

# Install

npm

```shell
npm install @react-comp/dialog
```

yarn

```shell
yarn add @react-comp/dialog
```

# Demo

[demo](https://react-comp.github.io/dialog/)

## Usage

```js
import Dialog from "@react-comp/dialog";
import "@react-comp/dialog/dist/dialog.css";

// ...
```

## Props

```js
export interface DialogProps {
  children?: React.ReactNode, // 内容
  visible?: boolean,          // 对话框是否可见
  maskStyle?: string,         // 遮罩层的样式
  contentStyle?: string,       // 内容的样式
  maskClosable?: boolean,     // 是否能通过点击遮罩层关闭对话框
  onClose?: () => void;       // Props.maskClosable 值为 true 时的遮罩层点击回调
}
```
npm package: @react-comp/lazyload
Description: lazyload
Author: moonlit
Latest version: 0.0.2

# Introduction

lazyload

# Install

npm

```bash
npm install "@react-comp/lazyload"
```

yarn

```bash
yarn add "@react-comp/lazyload"
```

# Demo

[demo](https://react-comp.github.io/lazyload/)

# Usage

```js
import Lazyload from "@react-comp/lazyload";
import "@react-comp/lazyload/dist/lazyload.css";

// ...
```

# prop

```js
<Lazyload
  src: string,                    // image source
  defaultSrc: string,             // image default source
  alt?: string,                   // alt
  className?: string[] | string,  // className
  style?: object,                 // style
/>
```

# todo

- [ ] Support left and right sliding

- [ ] Support specified trigger distance
npm package: @react-comp/message
Description: An awesome libary
Author: moonlit
Latest version: 1.0.7

# Introduction

message popup tool

# Install

npm

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

yarn

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

# Demo

[demo](https://react-comp.github.io/message/)

# Usage

```jsx
import message from '@react-comp/message';
import '@react-comp/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);
```