1.0.4 • Published 4 years ago
@feizheng/react-ant-image-pop-view v1.0.4
react-ant-image-pop-view
Ant popover view image for react.
installation
npm install -S @feizheng/react-ant-image-pop-view
update
npm update @feizheng/react-ant-image-pop-view
properties
Name | Type | Default | Description |
---|---|---|---|
className | string | - | The extended className for component. |
placement | string | 'rightTop' | Placement for antd. |
size | array | 100 | Thumbnail size. |
popSize | array | 100 | Popup picture size. |
thumbnail | string | - | The thumbnail/popup pictures. |
src | string | - | The popup original picutrel. |
usage
import css
@import "~@feizheng/webkit-sassui-frame-wrapper/dist/index.scss"; @import "~@feizheng/react-figure/dist/style.scss"; @import "~@feizheng/react-ant-image-pop-view/dist/style.scss"; // customize your styles: $react-ant-image-pop-view-options: ()
import js
import ReactAntImagePopView from '@feizheng/react-ant-image-pop-view'; import ReactDOM from 'react-dom'; import React from 'react'; import './assets/style.scss'; class App extends React.Component { componentDidMount() {} render() { return ( <div className="app-container"> <ReactAntImagePopView thumbnail="https://himg.bdimg.com/sys/portrait/item/be10475f686d6c73db00.jpg" src="https://himg.bdimg.com/sys/portrait/item/be10475f686d6x73db00.jpg" size={['100px', '100px']} popSize={[200, 200]} /> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));
documentation
resources
- https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
- https://www.valentinog.com/blog/react-webpack-babel/
- https://jestjs.io/docs/en/tutorial-react#snapshot-testing-with-mocks-enzyme-and-react-16
- https://testing-library.com/docs/react-testing-library/api
todos
- Add: semver number for every build files.
- Add: need output css files.
- Add: PWA support for docs.
- Add: source.map file for dist(
you can upload for production debug
). - BUG: npm run dev will clean dist.