react-zmage - 一个基于 React 的可缩放图片控件 | A zoomable image container power by react

  •        257

一个基于 React 的可缩放图片控件 | A zoomable image container power by react

http://zmage.caldis.me
https://github.com/Caldis/react-zmage

Dependencies:

prop-types : ^15.6.2
react : ^16.4.2
react-dom : ^16.4.2
react-motion : ^0.5.2
react-transition-group : ^1.2.1

Tags
Implementation
License
Platform

   




Related Projects

react-medium-image-zoom - Medium.com style image zoom for React

  •    Javascript

This library is a different implementation of Medium.com's image zoom that allows for a low-res and high-res images to work together for “zooming” effects and works regardless of parent elements that have overflow: hidden or parents with transform properties. Versions >=3.0.0 are compatible with React.js >=16.x; if you need compatibility with react@^0.14.0 || ^15.0.0, please use version 2.x. You can view the demo here.

react-mapbox-gl - A React binding of mapbox-gl-js

  •    TypeScript

If those properties changed at the mapbox-gl-js level and you don't update the value kept in your state, it will be unsynced with the current viewport. At some point you might want to update the viewport value (zoom, pitch or bearing) with the ones in your state but using value equality is not enough. Taking zoom as example, you will still have the unsynced zoom value therefore we can't tell if you want to update the prop or not. In order to explicitly update the current viewport values you can instead break the references of those props and reliably update the current viewport with the one you have in your state to be synced again. Please try to reproduce your problem with the boilerplate before posting an issue.

react-simple-img - 🌅 React lazy load images with IntersectionObserver API and Priority Hints

  •    Javascript

Image component working similar with standard img tag and with the following props. This function is only required, when you want to customise intersection observer configuration.

react-starterify - A minimal React JS application starter kit

  •    Javascript

A minimal React JS application starter kit. React Starterify aims to give you a good starting point for your projects. If you're looking for a minimal ES6 (ES2015) React JS starter with nice shallow rendering test examples, this is probably for you.

swipe - Swipe is the most accurate touch slider. Support both React and Angular.

  •    Javascript

Swipe is the most accurate touch slider. It is extremely lightweight (only 6kb minified) and works across all browsers, including IE7+. You can install this package directly via Bower bower install swipe-js or NPM npm install swipejs.


react-shimmer - 🌠 React <img> component that simulates a shimmer effect while loading.

  •    Javascript

A powerful, customisable, <img> component that simulates a shimmer effect while loading. (with zero dependencies!) Currently compatible with React, but RN compatibility is also on the way. Feel free to send PRs.

react-native-animatable - Standard set of easy to use animations and declarative transitions for React Native

  •    Javascript

To make looping animations simply set the iterationCount to infinite. Most animations except the attention seekers work best when setting direction to alternate. You can create your own simple transitions of a style property of your own choosing. The following example will increase the font size by 5 for every tap – all animated, all declarative! If you don't supply a duration property, a spring animation will be used.

react-native-photo-view - Pinch-to-zoom view for React Native (both iOS and Android)

  •    Objective-C

Provides custom Image view for React Native that allows to perform pinch-to-zoom on images. Works on both iOS and Android. This component uses PhotoDraweeView for Android and MWPhotobrowser on iOS.

react-native-img-cache - Image Cache for React Native

  •    TypeScript

CachedImage component and Cache image manager for React Native. I am no longer maintaining this library but react-native-expo-image-cache which depends on ExpoKit.

react-pdf-js - A React component to wrap PDF.js

  •    Javascript

react-pdf-js provides a component for rendering PDF documents using PDF.js. Written for React 15/16 and ES2015 using the Airbnb style guide.

react-native-transformable-image - A pure JavaScript written transformable image component, like PhotoView or ImageViewer, supports gestures like pan, pinch, double tab and fling, works with both iOS and Android

  •    Javascript

A pure JavaScript written transformable image component, like PhotoView or ImageViewer, supports gestures like pan, pinch, double tab and fling, works with both iOS and Android. Written in pure JS, this component should be one of the most easy to use component among all the zoomable, scrollable PhotoView alike views on react-native.

react-native-sketch-canvas - A React Native component for drawing by touching on both iOS and Android

  •    Javascript

A React Native component for drawing by touching on both iOS and Android. To use an image as background, localSourceImage(see below) reqires an object, which consists of filename, directory(optional) and mode(optional). Note: Because native module cannot read the file in JS bundle, file path cannot be relative to JS side. For example, '../assets/image/image.png' will fail to load image.

teaset - A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control

  •    Javascript

A UI library for react native, provides 20+ pure JS(ES6) components, focusing on content display and action control. Tips: In the Android system, the animations is not smooth, switch to the release mode can be resolved.

react-rangeslider - A lightweight responsive react range slider component

  •    Javascript

A fast & lightweight react component as a drop in replacement for HTML5 input range slider element. React-Rangeslider is bundled with a slider component & default styles which can be overridden depending on your design requirements.

react-demo - React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter,可能是东半球最佳的 React Starter,基于 Vue Cli 二次开发

  •    Javascript

React 示例项目 · 简易留言板。本项目拥有完善的文档说明与注释,让您快速上手 React 开发 SPA。Webpack / ES6 + Babel / Redux / React Router —— An Excellent React Starter,可能是东半球最佳的 React Starter,基于 Vue Cli 二次开发

react-id-swiper - A library to use idangerous Swiper as a ReactJs component.

  •    Javascript

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

react-slick - React carousel component

  •    Javascript

For all available props, go here. This project exists thanks to all the people who contribute. [Contribute].

react-native-mask-loader - React Native App Loader that shows an expanding image as a mask on your app

  •    Javascript

This component provides a loading screen for React Native apps that is meant to reproduce Twitter's app loading animation. There is an accompanying blog post at https://facebook.github.io/react-native/blog/2018/01/18/implementing-twitters-app-loading-animation-in-react-native.html.