smart-overlay

English

安装

npm i smart-overlay

示例

import createOverlay from 'smart-overlay'
import { Popup } from 'your-ui-kit'

export const { OverlayProvider, useOverlay } = createOverlay({
  component: Popup,
  display: 'show',
  className: 'app-overlay',
  duration: 300,
  defaultOptions: { position: 'bottom', round: true }
})

export function App() {
  return (
    <OverlayProvider>
      <YourRoutes />
    </OverlayProvider>
  )
}

function ProductPage() {
  const overlay = useOverlay()

  const openCart = () => {
    const close = overlay.show({
      children: <Cart />,
      onClose: () => console.log('购物车已关闭')
    })
    // 需要时调用 close() 关闭当前这一个实例
  }

  return <button onClick={openCart}>打开</button>
}

每次 show() 都会挂载一个新实例；无参 close() 关闭最近打开的一个（LIFO）；需要关闭指定实例，使用 show() 返回的函数。

参数

createOverlay(options)

| 字段 | 类型 | 默认 | | ---------------- | ---------------------------- | -------- | | component | ComponentType<TProps> | — | | display | 'show' \| 'visible' | 'show' | | defaultOptions | OverlayShowOptions<TProps> | — | | className | string | — | | duration | number | 300 |

duration 为关闭后延迟卸载的毫秒数，让容器有机会播放关闭过渡；设为 0 立即卸载。

返回 { OverlayProvider, useOverlay }。

useOverlay()

必须在 <OverlayProvider /> 内部使用，返回：

| 字段 | 类型 | 说明 | | ------- | ------------------------- | --------------------------------------------- | | show | (options) => () => void | 挂载一个新实例，返回绑定到该实例的关闭函数 | | close | () => void | 关闭最近打开的一个实例（LIFO） |

show(options)

除容器自身的 props 原样透传，以下两个字段会被特殊处理：

| 字段 | 说明 | | ---------------- | -------------------------------------------------------------------------------------------------- | | onClose | 该实例被关闭时触发一次（用户交互、close()、show() 返回的函数，任一路径触发后只会调用一次） | | onClickOverlay | 原样转发给容器；是否同时关闭浮层由容器自身的配置（如 closeOnClickOverlay）决定 |

容器协议

interface OverlayBaseProps {
  show?: boolean
  visible?: boolean
  onClose?: () => void
  onClickOverlay?: () => void
  className?: string
}

License

MIT © iamgx

⚠️ 谨慎使用：仅针对内部指定业务场景。