[English](./README.md) | 简体中文

# @ray-js/focus-mask

[![latest](https://img.shields.io/npm/v/@ray-js/focus-mask/latest.svg)](https://www.npmjs.com/package/@ray-js/focus-mask) [![download](https://img.shields.io/npm/dt/@ray-js/focus-mask.svg)](https://www.npmjs.com/package/@ray-js/focus-mask)

> 用于输入框的聚焦功能实现

## 安装

```sh
$ npm install @ray-js/focus-mask
// 或者
$ yarn add @ray-js/focus-mask
```

## 开发

```sh
# 安装依赖
yarn

# 实时编译Demo代码
yarn start:tuya
```

## 使用

### 基础用法

`focus` 属性可以控制蒙版是否聚焦状态

```tsx
import React, { useState } from 'react';
import { Input } from '@ray-js/ray';
import FocusMask from '@ray-js/focus-mask';

export default function Home() {
  const [inputFocus, setInputFocus] = useState(false);
  return (
    <FocusMask focus={inputFocus}>
      <Input
        className="black-input"
        placeholderStyle={
          {
            color: 'rgba(255, 255, 255, 0.3)',
          } as any
        }
        onFocus={() => setInputFocus(true)}
        onBlur={() => setInputFocus(false)}
        placeholder="please input name"
      />
    </FocusMask>
  );
}
```