Package Exports
- react-zoom-children
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-zoom-children) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
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 即可。