Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

https://github.com/brycedorn/react-intense

A React component for viewing large images up close 🔍
https://github.com/brycedorn/react-intense

component fullscreen images javascript react requestanimationframe

Last synced: 2 months ago
JSON representation

A React component for viewing large images up close 🔍

Lists

README 

        
# react-intense



[![npm version](https://badge.fury.io/js/react-intense.svg)](https://badge.fury.io/js/react-intense) [![Build and Deploy](https://github.com/brycedorn/react-intense/actions/workflows/deploy.yml/badge.svg)](https://github.com/brycedorn/react-intense/actions/workflows/deploy.yml)



This component is a port of [Intense Image Viewer](http://tholman.com/intense-images/) for use with React. Now with hooks!



[Demo](https://bryce.io/react-intense).



## Usage



Simply replace your `` element with a `` component:



```javascript

import ReactIntense from 'react-intense'



...



```



Or for more flexibility, use the provided `useIntenseMaximize` hook:



```javascript

import { useIntenseMaximize } from 'react-intense'



...



const { maximize, renderViewer } = useIntenseMaximize(props);



return (

  <>

    Maximize!

    {renderViewer()}

  >

);

```



## Optional Props



| Name | Type | Description |

| --- | --- | --- |

| `title`     | `string`          | Renders in corner in maximized view. |

| `caption`   | `string`          | Renders below title in maximized view. |

| `vertical`  | `boolean`         | Images lock to scrolling either horizontally (default) or vertically. |

| `moveSpeed` | `number`          | How fast to scroll images when following mouse. |

| `loader`    | `React.ReactNode` | The loading spinner to use. |



## Styling



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



## Issues



If you find any issues with this component, please [report](https://github.com/brycedorn/react-intense/issues) them!



## Thanks



- [Tim Holman](https://github.com/tholman)

- [Paul Irish](https://gist.github.com/paulirish/1579671)

- [loading.io](http://loading.io)