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

# @ray-js/components-ty-popup

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

> Popup container for displaying modals, information prompts, and other content. It supports stacking multiple popups for display.

To provide a better development experience and more powerful features, we recommend switching from the current component to the new [SmartUI Component Library](https://developer.tuya.com/material/smartui?comId=help-getting-started), which includes a built-in Popup component. SmartUI is not only actively maintained but also offers numerous advantages for applet development:

- **Cross-Platform Preview**: Easily view component performance across different platforms to ensure consistency and high quality.
- **Online Editing**: Achieve real-time online editing and preview through Codesandbox, accelerating the development process and improving efficiency.


## Installation

```sh
$ npm install @ray-js/components-ty-popup
# or
$ yarn add @ray-js/components-ty-popup
```

## Usage

```tsx
import Foo from '@ray-js/components-ty-popup';
export default () => <Foo />;
```

### Basic Usage

```tsx
import React, { useState } from 'react';
import Popup from '@ray-js/components-ty-popup';
import { View, Button } from '@ray-js/ray';

export default function Demo() {
  const [show, setShow] = useState(false);

  return (
    <View>
      <Popup
        show={show}
        onClickOverlay={() => setShow(false)}
        position="bottom"
        round
        customStyle={{
          height: '30%',
          width: '100%',
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
        }}
      >
        Content
      </Popup>
      <Button type="primary" onClick={() => setShow(true)}>
        Show Popup
      </Button>
    </View>
  );
}
```