[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)

> Focus function implementation for input boxes

## Installation

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

## Development

```sh
# Install dependencies
yarn

# Live compile Demo code
yarn start:tuya
```

## Usage

### Basic Usage

The `focus` attribute can control whether the mask is in a focused state

```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>
  );
}
```