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: 19 days ago
JSON representation

A React component for viewing large images up close 🔍

• Host: GitHub
• URL: https://github.com/brycedorn/react-intense
• Owner: brycedorn
• License: mit
• Created: 2016-10-29T22:50:51.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-11-27T16:39:14.000Z (about 1 year ago)
• Last Synced: 2024-11-08T01:47:27.744Z (about 1 month ago)
• Topics: component, fullscreen, images, javascript, react, requestanimationframe
• Language: CSS
• Homepage: https://bryce.io/react-intense
• Size: 9.08 MB
• Stars: 187
• Watchers: 4
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-components - react-intense - A React component for viewing large images up close. (UI Components / Photo / Image)
• awesome-react - react-intense - A React component for viewing large images up close.  (UI Components / Photo / Image)
• awesome-list - react-intense - A React component for viewing large images up close. (Demos / Photo / Image)
• awesome-react-components - react-intense - A React component for viewing large images up close. (UI Components / Photo / Image)
• awesome-react-components - react-intense - A React component for viewing large images up close. (UI Components / Photo / Image)
• awesome-react-components - react-intense - A React component for viewing large images up close. (UI Components / Photo / Image)
• fucking-awesome-react-components - react-intense - A React component for viewing large images up close. (UI Components / Photo / Image)

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)