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-children

Browser 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 即可。

致谢

• father Library toolkit based on rollup, docz, storybook, jest, prettier and eslint,整合工具包简化了开源包开发,
• drawer, zooming