react zmage

react-zmage

react-zmage is a React-based image scaling control. The image wrapped by the Zmage tag can be scaled. You can use this control to replace the native img tag and include the image scaling function.

React version needs to be greater than v16.6.0

Demo

Online

https://zmage.caldis.me

local

git clone https://github.com/Caldis/react-zmage
cd react-zmage
npm i
npm run dev

Install

npm i react-zmage --save

use

1. Introduce components

 import Zmage from 'react-zmage' 

2. Replace the img tag in the page with the Zmage component

 < img src = "图片源连接" />
? to ?
< Zmage src = "图片源连接" / > 

Now these pictures can be enlarged and viewed!

You can also call the picture through function calls

 // Zmage.browsing 函数接受的参数与 <Zmage/> 组件完全一致
< a onClick = { ( ) => Zmage . browsing ( { src : imagePath } ) } >任意元素</ a > 

Use in typescript

 import ReactZmage from 'react-zmage' ;

// 在生命周期等方法中使用
public componentDidMount ( ) {
    const zmage = new ReactZmage ( {
        // ...options
    } ) ;
}

// 也支持组件方式使用
public render ( ) : JSX . Element {
    const defaultConfig = {
        src : 'http://zmage.caldis.me/imgSet/childsDream/demo.jpg' ,
        alt : '示例图片' ,
    } ;

    return (
        < ReactZmage
            { ... defaultConfig }
        / >
    ) ;
} 

Basic configuration

Get started now, it's enough that you just need to know the following parameters

For an online example, see https://zmage.caldis.me

• Basic call properties

Configuration Items	type	default value	describe	Example
src	String	""	Image Url, the same as src attribute of the img tag	Example
alt	String	""	Image placeholder text, the same as alt attribute of the img tag	Example
set	Object[]	[]	Sequence pictures, multiple image objects can be passed in set to render multiple images in view mode, or can be used to render enlarged high-definition pictures	Example
defaultPage	Number	0	If set is passed in to display multiple images, it can be used to specify the default page after opening	Example

Advanced configuration

It is also very easy to use without understanding these parameters, but if you need more detailed customization, you can further review the following content

• Preset configuration (beta)

Configuration Items	type	default value	describe	Example
preset	String	"auto"	Easily configure the functions and styles of the interface, which can be set as auto desktop mobile	Example affected configuration items

• Controlled properties

Configuration Items	type	default value	describe	Example
browsing	Boolean	empty	Controls whether to enter viewing mode	Example

• Functional control

Configuration Items	type	default value	describe	Example
controller	Check	Desktop | Mobile	Set a specific item to false to hide the operation controls in view mode	Example
hotKey	Check	Desktop | Mobile	Set a specific item to false to disable shortcut keys in view mode	Example
animate	Check	Desktop | Mobile	Pass specific parameters to specify page turn animation (browsing animation is not currently configurable) Optional value	Example

• Interface style

Configuration Items	type	default value	describe	Example
backdrop	String	"#FFFFFF"	Control the background color after enlarged picture	Example
zIndex	Number	1000	Control z-index of the external container to prevent it from being obscured by other elements	Example
radius	Number	Desktop | Mobile	Control the rounded corners of the picture in view mode	Example
edge	Number	Desktop | Mobile	Controls the distance from the edge of the screen in view mode	Example

• life cycle

Configuration Items	type	default value	describe	Example
onBrowsing	func	(browsing)=>{}	Lifecycle method, called when displayed/hide, will return the display status	Example
onZooming	func	(zooming)=>{}	Lifecycle method, called when zooming in/out, will be returned to the zoom state	Example
onSwitching	func	(paging)=>{}	Lifecycle method, called when switching pictures, will return the page number	Example
onRotating	func	(deg)=>{}	Lifecycle method, called when rotating the picture, will return the angle	Example

src

 "http://zmage.caldis.me/imgSet/childsDream/demo.jpg"

alt

 "图片的占位文字，作为图片的标题, 请尽量保持简短"

set

 // 如果设置了 Set, 则进入查看模式后第一张图片将会是 set 的首图, 而不是 src
// 如果你需要在查看模式中呈现高精度图片, 可以将其设置为 set 的首图, 或使用 defaultPage 指定
set = { [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
        // 图片样式
        style : { borderRadius : 30 } ,
        // 图片类名
        className : 'testClassName'
    } ,
    {
        // 另一个图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/2.jpg" ,
        // 另一段图片占位文字
        alt : "图片的占位文字，作为图片的标题, 请尽量保持简短" ,
    }
] }

defaultPage

set: [
    {
        // 图片 Url
        src : "http://zmage.caldis.me/imgSet/childsDream/1.jpg" ,
        // 图片占位文字
        alt : "图片的占位文字，尽量保持简短，描述图片作用" ,
    }
]

browsing

 browsing = { this . state . contrlledZmageState }

controller

 controller = { {
    // 关闭按钮
    close : true ,
    // 缩放按钮
    zoom : true ,
    // 下载按钮
    download : true ,
    // 旋转按钮
    rotate : true ,
    // 翻页按钮
    flip : true ,
    // 多页指示
    pagination : true ,
} }

hotKey

 hotKey = { {
    // 关闭（ESC）
    close : true ,
    // 缩放（空格）
    zoom : true ,
    // 翻页（左右）
    flip : true ,
} }

animate

 animate = { {
    flip : 'fade' ,
} }

backdrop

 backdrop = "linear-gradient(90deg, rgba(0,212,255,1) 0%, rgba(26,94,215,1) 100%)"

zIndex

 zIndex = { 19260817 }

radius

 radius = { 5 }

edge

 edge = { 20 }

onBrowsing

 onBrowsing = { state => {
    console . info ( "Browsing State: " , state )
} }

onZooming

 onZooming = { state => {
    console . info ( "Zooming State: " , state )
} }

onSwitching

 onSwitching = { page => {
    console . info ( "Switching page: " , page )
} }

onRotating

 onRotating = { deg => {
    console . info ( "Rotating State: " , deg , "deg" )
} } 

contribute

We are always welcome to launch a PR to help us improve the code. If you find any problems, we also welcome to launch an ISSUE to provide feedback on your opinions.

Quote

- [Material Icons](https://material.io/tools/icons/)

Certificate

react-zmage is based on MIT licensed