open-index/open-npm huggingface dataset:
npm package: @rainbow_deer/autotype
Description: React component.
Author: guojianqiang
Latest version: 0.1.1

# `autoType`

## introduction

a typing effect react component

## install

```shell script
npm install @rainbow_deer/autotype
or
yarn add @rainbow_deer/autotype
```

## usage

### basic

```tsx
import React from 'react'
import AutoType from '@rainbow_deer/autotype'

export default () => {
  const arr = [
    { type: 'text', text: '1.' },
    { type: 'br' },
    { type: 'text', text: '宝' },
    { type: 'wait', time: 900 },
    { type: 'br' },
    { type: 'text', text: '我今去输液了' },
    { type: 'wait', time: 900 },
    { type: 'br' },
    { type: 'text', text: '输的什么液' },
    { type: 'br' },
    { type: 'wait', time: 900 },
    { type: 'text', text: '想你的夜~' },
    { type: 'br' },
    { type: 'wait', time: 900 },
    {
      type: 'img',
      src: 'https://pic4.zhimg.com/80/v2-f079243271daa0b291c3de8083f91e40_720w.jpg',
      id: 'cat',
      style:
        'width: 50%;display: block;margin-left: auto;margin-right: auto;margin-top: 20px;margin-bottom: 20px;',
    },
    { type: 'text', text: '2.' },
    { type: 'br' },
    { type: 'text', text: '宝' },
    { type: 'wait', time: 900 },
    { type: 'br' },
    { type: 'text', text: '我去喝酒了' },
    { type: 'wait', time: 900 },
    { type: 'br' },
    { type: 'text', text: '喝的什么酒?' },
    { type: 'br' },
    { type: 'wait', time: 900 },
    { type: 'text', text: '爱你到无药可酒~' },
    { type: 'br' },
    { type: 'wait', time: 900 },
    {
      type: 'img',
      src: 'https://pic1.zhimg.com/80/v2-ad3b2892f65765a72f9f8a5a80f111de_720w.jpg',
      style:
        'width: 50%;display: block;margin-left: auto;margin-right: auto;margin-top: 20px;margin-bottom: 20px;',
    },
  ]
  return <AutoType actions={arr} />
}
```
npm package: @rainbow_deer/button
Description: React component.
Author: guojianqiang
Latest version: 0.1.8

# `Button`

## install

```shell script
npm install @rainbow_deer/button
or
yarn add @rainbow_deer/button
```

## usage

### basic

```tsx
import React, { useState } from 'react'
import Button from '@rainbow_deer/button'

export default () => {
  return (
    <>
      <Button>按钮</Button>
    </>
  )
}
```

## primary

```tsx
import React, { useState } from 'react'
import Button from '@rainbow_deer/button'

export default () => {
  return (
    <>
      <Button type='primary'>按钮</Button>
    </>
  )
}
```

### emphasize

```tsx
import React, { useState } from 'react'
import Button from '@rainbow_deer/button'

export default () => {
  return (
    <>
      <Button type='emphasize'>按钮</Button>
    </>
  )
}
```

### size

```tsx
import React, { useState } from 'react'
import Button from '@rainbow_deer/button'

const btnStyle = { marginRight: 8 }

export default () => {
  return (
    <>
      <Button type='emphasize' size='small' style={btnStyle}>
        按钮
      </Button>
      <Button type='emphasize' style={btnStyle}>
        按钮
      </Button>
      <Button type='emphasize' size='large'>
        按钮
      </Button>
    </>
  )
}
```

### disabled

```tsx
import React, { useState } from 'react'
import Button from '@rainbow_deer/button'

export default () => {
  return (
    <>
      <Button disabled type='emphasize'>
        按钮
      </Button>
    </>
  )
}
```

### percent

```tsx
import React, { useState } from 'react'
import Button from '@rainbow_deer/button'

export default () => {
  return (
    <>
      <Button percent={50} type='emphasize'>
        按钮
      </Button>
    </>
  )
}
```

### loading

```tsx
import React, { useState } from 'react'
import Button from '@rainbow_deer/button'

export default () => {
  return (
    <>
      <Button loading type='emphasize'>
        按钮
      </Button>
    </>
  )
}
```

### props

```ts
export interface ButtonProps extends Pick<ButtonType, Exclude<keyof ButtonType, 'type'>> {
  /**
   * 样式
   */
  style?: React.CSSProperties
  /**
   * 类选择器
   */
  className?: string
  /**
   * 类型
   */
  type?: 'primary' | 'emphasize'
  /**
   * 尺寸
   */
  size?: 'normal' | 'large' | 'small'
  /**
   * 类选择器前缀
   */
  prefixCls?: string
  /**
   * 2个中文字符自动添加空格
   */
  autoInsertSpaceInButton?: boolean
  /**
   * 是否独占一行
   */
  block?: boolean
  /**
   * 是否加载
   */
  loading?: boolean
  /**
   * 进度条
   */
  percent?: number
  /**
   * 进度文本
   */
  percentText?: string
  /**
   * 进度完成文本
   */
  fullPercentText?: string
  /**
   * 禁用
   */
  disabled?: boolean
}
```
npm package: @rainbow_deer/cloud-banner
Description: 网易云音乐banner轮播
Author: guojianqiang
Latest version: 1.0.1

---
title: cloud-banner
nav:
title: Components
path: /Components
group:
title: ReactComponent
path: /ReactComponent
---

模网易云音乐 banner 轮播效果

## install

```shell
npm install @rainbow_deer/cloud-banner
yarn add @rainbow_deer/cloud-banner
```

## usage

### basic

```tsx
import React, { useEffect, useState } from 'react'
import CloudBanner from '@rainbow_deer/cloud-banner'

const Banner = () => {
  const [imgList, setImgList] = useState([])

  useEffect(() => {
    fetchBannerList()
  }, [])

  const fetchBannerList = () => {
    fetch('https://netease-cloud-music-api-rainbow-deer.vercel.app/banner').then((res) => {
      const resPromise = res.json()
      resPromise.then((res) => {
        const banners = res?.banners || []
        setImgList(() => {
          return banners.map((banner: any) => ({
            imgUrl: banner.imageUrl,
            children: <div>hello world</div>,
          }))
        })
      })
    })
  }

  return <CloudBanner imgList={imgList} height={200} />
}

export default Banner
```
npm package: @rainbow_deer/icon
Description: React component.
Author: guojianqiang
Latest version: 0.1.6

# `Icon`

## install

```shell script
npm install rainbow_deer/icon
or
yarn add rainbow_deer/icon
```

## Usage

```tsx
import React, { useState } from 'react'
import Icon from '@rainbow_deer/icon'

export default () => {
  return (
    <>
      <Icon type='close' />
      <Icon type='success' />
      <Icon type='error' />
      <Icon type='warning' />
    </>
  )
}
```

## props

```ts
export interface IconProps {
  icon: string
  className?: string
  style?: React.CSSProperties
}
```
npm package: @rainbow_deer/mini-di
Description: Dependency injection based on typescript+reflect-metadata
Author: guojianqiang
Latest version: 1.0.3

# mini-di
Dependency injection based on typescript+reflect-metadata

## install
```shell
yarn add @rainbow_deer/mini-di
npm install @rainbow_deer/mini-di
```
## peerDependencies
```shell
yarn add reflect-metadata
```
## babel
```shell
yarn add babel-plugin-transform-typescript-metadata - D
```
```json
{
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties"],
    "babel-plugin-transform-typescript-metadata"
  ]
}
```
## tsconfig
experimentalDecorators, emitDecoratorMetadata, types and lib compilation options in your tsconfig.json file.
```json
{
    "compilerOptions": {
        "target": "es5",
        "lib": ["es6"],
        "types": ["reflect-metadata"],
        "module": "commonjs",
        "moduleResolution": "node",
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true
    }
}
```
## usage
```ts
import { injectable, inject, useService } from '@rainbow_deer/mini-di'

@injectable()
class A {
  sayHello () {
    console.log('hello! my name is A')
  }
}

@injectable()
class B {
  @inject() a: A
  sayHello () {
    console.log('hello! my name is B')
  }
}

class C {
  @inject() a: A
  @inject() b: B
  sayHello () {
    console.log('hello! my name is C')
  }
}

const c = new C()
const b = useService(B)
c.a.sayHello() // hello! my name is A
c.b.a.sayHello() // hello! my name is A
c.b.sayHello() // hello! my name is B
b.a.sayHello() // hello! my name is A
```
npm package: @rainbow_ljy/react-native-startup
Description: My new module
Author: LiJunYi
Latest version: 0.1.11

# @rainbow_ljy/react-native-startup

My new module

# API documentation

- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/@rainbow_ljy/react-native-startup/)
- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/@rainbow_ljy/react-native-startup/)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install @rainbow_ljy/react-native-startup
```

### Configure for Android




### Configure for iOS

Run `npx pod-install` after installing the npm package.

# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).