All Projects → brycedorn → React Intense

brycedorn / React Intense

Licence: mit
A React component for viewing large images up close 🔍

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to React Intense

Silentbox
A lightbox inspired Vue.js component.
Stars: ✭ 196 (+28.95%)
Mutual labels:  images, component
React Lazy Images
🖼️ 🛋️ Components and utilities for lazy image loading in React
Stars: ✭ 254 (+67.11%)
Mutual labels:  images, component
React Native Image Gallery
Pure JavaScript image gallery component for iOS and Android with high-performance and native feeling in mind
Stars: ✭ 601 (+295.39%)
Mutual labels:  images, component
Postcss Viewport Height Correction
PostCSS plugin to solve the popular problem when 100vh doesn’t fit the mobile browser screen.
Stars: ✭ 137 (-9.87%)
Mutual labels:  fullscreen
Yjplay
一个支持自定义UI布局,流式API, 加密,直播 ,亮度,音量,快进等手势 ,广告视频预览,多种加载模式 ,多种分辨率切换 ,多种封面图, 自定义数据源,列表播放,倍数播放,边播变缓存<font color="red">不是使用AndroidVideoCache</font>,离线播放,神奇的播放器
Stars: ✭ 1,700 (+1018.42%)
Mutual labels:  fullscreen
Himawari.js
Download real-time images of Earth from the Himawari-8 satellite
Stars: ✭ 1,763 (+1059.87%)
Mutual labels:  images
Xcassetpacker
A command line tool for converting a folder of images into an .xcasset package for Xcode
Stars: ✭ 150 (-1.32%)
Mutual labels:  images
React Native Modalize
A highly customizable modal/bottom sheet that loves scrolling content.
Stars: ✭ 2,119 (+1294.08%)
Mutual labels:  component
React Use Clipboard
React hook that provides copy to clipboard functionality.
Stars: ✭ 149 (-1.97%)
Mutual labels:  component
Bekcurvetabbar
Full Customizable Tabbar with IBInspectables
Stars: ✭ 144 (-5.26%)
Mutual labels:  component
React Native Wormhole
⚛️ 🌌 Inter-dimensional Portals for React Native. 👽 🖖
Stars: ✭ 133 (-12.5%)
Mutual labels:  component
Datasets
🎁 3,000,000+ Unsplash images made available for research and machine learning
Stars: ✭ 1,805 (+1087.5%)
Mutual labels:  images
Imgpush
Minimalist Self-hosted Image Service for user submitted images in your app
Stars: ✭ 144 (-5.26%)
Mutual labels:  images
Esp Azure
SDK to connect ESP8266 and ESP32 to Microsoft Azure IoT services
Stars: ✭ 137 (-9.87%)
Mutual labels:  component
Idenprof
IdenProf dataset is a collection of images of identifiable professionals. It is been collected to enable the development of AI systems that can serve by identifying people and the nature of their job by simply looking at an image, just like humans can do.
Stars: ✭ 149 (-1.97%)
Mutual labels:  images
Reactpatterns
Patterns for React Developers
Stars: ✭ 1,682 (+1006.58%)
Mutual labels:  component
Scrollprogress
🛸 Light weight library to observe the viewport scroll position
Stars: ✭ 148 (-2.63%)
Mutual labels:  component
Fluentvalidation.blazor
Fluent Validation-powered Blazor component for validating standard <EditForm> 🌌 ✅
Stars: ✭ 140 (-7.89%)
Mutual labels:  component
React Step Progress Bar
A library to create stunning progress bars and steps in React 🌡
Stars: ✭ 140 (-7.89%)
Mutual labels:  component
Instagramdownloader
Firefox and Chrome Extention which creates an download button for instagram images and videos and videos
Stars: ✭ 144 (-5.26%)
Mutual labels:  images

react-intense

npm version

This component is a port of Intense Image Viewer for use with React.

Demo.

Usage

Simply replace your <img> element with a <ReactIntense> component:

import ReactIntense from 'react-intense'

...

<ReactIntense src='img.jpg' />

Optional Props

Name Type Description
title string Renders in corner in maximized view.
caption string Renders below title in maximized view.
trigger Component Option to override the thumbnail image as the trigger to maximize the image. Passed onClick as prop to trigger maximized view.
vertical boolean Images lock to scrolling either horizontally (default) or vertically.
moveSpeed number How fast to scroll images when following mouse.
loader string The class for the loading animation that shows when the image is being loaded for maximized view. Default is in loader.css.

Styling

Feel free to use and/or customize the provided styles in lib/ReactIntense.css.

Issues

If you find any issues with this component, please report them!

Thanks

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].