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