react-intense

KO | EN

gitlite — search

#python #hacktoberfest #react #ai #typescript #llm #android #machine-learning #linux #nodejs #awesome-list #security #mcp #open-source

(★ 189)

A React component for viewing large images up close 🔍

File Explorer

Download Latest Version (.zip)

- - deploy.yml
- polyfills.js
- ReactIntense.css
- ReactIntense.js
- polyfills.js
- ReactIntense.css
- ReactIntense.tsx
- - favicon.png
  - horse.jpg
  - horse_thumb.jpg
  - rain.jpg
  - rain_thumb.jpg
  - temple.jpg
  - temple_thumb.jpg
- index.d.ts
- index.html
- index.tsx
- styles.css
.babelrc
.gitignore
.prettierrc.json
LICENSE
package-lock.json
package.json
README.md
tsconfig.json

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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 `<img>` element with a `<ReactIntense>` component:

```javascript
import ReactIntense from 'react-intense'

...

<ReactIntense src='img.jpg' />
```

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

```javascript
import { useIntenseMaximize } from 'react-intense'

...

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

return (
  <>
    <button onClick={maximize}>Maximize!</button>
    {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)

react-intense

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

react-intense

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README