@overlastic/react 0.5.0 → 0.5.1

package/README.md

@@ -1,183 +1,29 @@
-# @overlastic/react
+<p align="center">
+  <a href="https://overlastic.vercel.app/" target="blank">
+    <img src="https://github.com/hairyf/overlastic/raw/master/docs/public/circle.svg" width="120" alt="Nest Logo" />
+  </a>
+</p>
 
-@overlastic/react is used to define Overlay components in react and supports both imperative and declarative usage!
+<p align="center">
+ A create modal | dialog | popup promise deferred library
+</p>
 
-## Install
+<p align="center">
+  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/v/@overlastic/react.svg" alt="NPM Version" /></a>
+  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/l/@overlastic/react.svg" alt="Package License" /></a>
+  <a href="https://www.npmjs.com/@overlastic/react"><img src="https://img.shields.io/npm/dm/@overlastic/react.svg" alt="NPM Downloads" /></a>
+</p>
 
-With pnpm:
-```sh
-pnpm add @overlastic/react
-```
-
-With yarn:
-```sh
-yarn add @overlastic/react
-```
-
-## Usage
-
-### Step 1: Define Component
-
-```tsx
-// overlay.tsx
-export function Component(props) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    // Duration of overlay duration, helps prevent premature component destruction
-    duration: 200,
-  })
-
-  return (
-    <div className={visible && 'is--visible'}>
-      <span onClick={() => resolve(`${props.title}:confirmed`)}> Confirm </span>
-    </div>
-  )
-}
-```
-
-### Step 2: Create Overlay
-
-You can convert the component into a modal dialog box by using the `defineOverlay` method, which allows you to call it in Javascript / Typescript.
-```ts
-import { defineOverlay } from '@overlastic/react'
-import { Component } from './overlay'
-
-// Convert to imperative callback
-const callback = defineOverlay(Component)
-// Call the component and get the resolve callback value
-const value = await callback({ title: 'callbackOverlay' })
-// value === "callbackOverlay:confirmed"
-```
-
-You can also directly call the component through `renderOverlay`, bypassing the `defineOverlay` method.
-
-```ts
-import { renderOverlay } from '@overlastic/react'
-import { Component } from './overlay'
-
-const value = await renderOverlay(Component, {
-  title: 'useOverlayDefine'
-})
-// value === "useOverlayDefine:confirmed"
-```
-
-## Injection Holder
-
-In addition to using `defineOverlay` and `renderOverlay` to create popup components, you can also use useOverlayHolder to create popup components within a component and inherit the current context of the application.
-
-```tsx
-import { useOverlayHolder } from '@overlastic/react'
-import { OverlayComponent } from './overlay'
-
-export function Main() {
-  // Use useOverlayHolder(Component) to create a component holder that supports the current context.
-  const [holder, overlayApi] = useOverlayHolder(OverlayComponent)
-
-  function open() {
-    // Open the popup component
-    overlayApi()
-      .then((result) => {})
-  }
-  return (
-    <>
-      <div onClick={open}> open </div>
-      {/* Mount the holder */}
-      {holder}
-    </>
-  )
-}
-```
-
-## Define Component
-
-Components created using `@overlastic/react` support both imperative and declarative methods of calling. In addition to imperative methods, these components can also be used in JSX.
+## Description
 
-> This is an optional option that is very useful when porting old components.
+Create messages or dialog overlays using Overlastic in React APP.
 
-```tsx
-// If using Typescript, use PropsWithOverlays to define props type
-import type { PropsWithOverlays } from '@overlastic/react'
-import { useOverlayDefine } from '@overlastic/react'
+## Installation
 
-export function Component(props: PropsWithOverlays<{ /* ...you props */ }>) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    // pass props to useOverlayDefine for processing
-    props
-  })
-
-  return (
-    <div className={visible && 'is--visible'}>
-      ...
-    </div>
-  )
-}
+```bash
+$ npm install --save @overlastic/react
 ```
 
-Once the Overlay component has received props, the popup layer component can be used in JSX.
-
-```tsx
-import { useState } from 'react'
-import { Component } from './overlay'
-
-export function Main() {
-  const [visible, setVisible] = useState(false)
-
-  function openOverlay() {
-    setVisible(true)
-  }
-
-  function onResolve(value) {
-    setVisible(false)
-  }
-
-  function onReject(value) {
-    setVisible(false)
-  }
-
-  return (
-    <Component visible={visible} onResolve={onResolve} onReject={onReject} />
-  )
-}
-```
+## Quick Start
 
-If you want to replace other fields and event names, you can do so using the `model` and `events` config of useOverlayDefine.
-
-```jsx
-function Component(props: { onOn?: Function, onNook?: Function, open: boolean }) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    events: { resolve: 'onOk', reject: 'onNook' },
-    model: 'open',
-    props,
-  })
-  // ...
-}
-```
-
-## Customized
-
-You can use `@overlastic/react` to modify existing components or component libraries
-
-Take [antd(drawer)](https://ant.design/components/drawer-cn) as an example：
-
-```tsx
-import type { PropsWithOverlays } from '@overlastic/react'
-import { useOverlayDefine } from '@overlastic/react'
-import { Button, Drawer } from 'antd'
-
-function MyDrawer(props: PropsWithOverlays<{ title: string }>) {
-  const { visible, resolve, reject } = useOverlayDefine({
-    duration: 200,
-    props,
-  })
-
-  return (
-    <Drawer title={props.title} onClose={reject} open={visible}>
-      {/* Custom contents.... */}
-      <Button type="primary" onClick={() => resolve(`${props.title}:confirmed`)}>
-        Confirm
-      </Button>
-    </Drawer>
-  )
-}
-
-export default MyDrawer
-```
+[Overview & Tutorial](https://overlastic.vercel.app/en/react/)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@overlastic/react",
   "type": "module",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "license": "MIT",
   "homepage": "https://github.com/hairyf/overlastic#readme",
   "repository": {
@@ -32,7 +32,7 @@
     "pascal-case": "3.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "@overlastic/core": "^0.5.0"
+    "@overlastic/core": "^0.5.1"
   },
   "devDependencies": {
     "@types/react": "^18.3.2",