0.1.3 • Published 4 years ago
react-zoom-children v0.1.3
react-zoom-children
🔍zoom img or any childNode for react. (Inspired by drawer, zooming)
Example
http://becarchal.github.io/react-zoom-children
Usage
import ReactZoomChildren from 'react-zoom-children';
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<ReactZoomChildren>
{children}
</ReactZoomChildren>
, mountNode);Install
npm install -S react-zoom-childrenBrowser Support
 |  |  |  |  |
|---|---|---|---|---|
| IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
API
| props | type | default | description |
|---|---|---|---|
| prefix | string | 'rzc' | prefix class |
| wrapperClassName | string | null | wrapper class name |
| enlargedContent | ReactElement|null | null | Enlarged content |
| transitionDuration | number | 0.4 | Transition duration in seconds |
| transitionTimingFunction | string | 'cubic-bezier(0.4, 0, 0, 1)' | Transition timing function |
| maskColor | string | 'rgb(255, 255, 255)' | mask background color |
| maskOpacity | number | 1 | mask background opacity |
| style | object | {} | wrapper style |
| maskStyle | object | {} | mask style |
| scaleBase | number | 1 | The base scale factor for zooming. By default scale to fit the window |
| zIndex | number | 998 | The z-index that the wrapper will be added with |
| customSize | object|string|null | null | Scale (zoom in) to given width and height. Ignore scaleBase if set. Alternatively, provide a percentage value relative to the original image size |
| onOpen | function | () => {} | A callback function that will be called when a target is opened and transition has ended. It will get the target element as the argument |
| onClose | function | () => {} | Same as above, except fired when closed |
| onBeforeOpen | function | () => {} | A callback function that will be called before open |
| onBeforeClose | function | () => {} | A callback function that will be called before close |
Development
npm install
npm start
npm run coverage欢迎参与贡献
发现了错误? 向我发起一个 PR 吧! 参考 Commit message 和 Change log 编写指南 - 阮一峰的网络日志 提交 commit 即可。