🔍zoom img or any childNode for react. (Inspired by drawer, zooming)
http://becarchal.github.io/react-zoom-children
import ReactZoomChildren from 'react-zoom-children';
import React from 'react';
import ReactDom from 'react-dom';
ReactDom.render(
<ReactZoomChildren>
{children}
</ReactZoomChildren>
, mountNode);
npm install -S react-zoom-children
IE 10+ ✔ | Chrome 31.0+ ✔ | Firefox 31.0+ ✔ | Opera 30.0+ ✔ | Safari 7.0+ ✔ |
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 |
npm install
npm start
npm run coverage
发现了错误? 向我发起一个 PR 吧! 参考 Commit message 和 Change log 编写指南 - 阮一峰的网络日志 提交 commit 即可。