<commit_before># react-intense

[![npm version](https://badge.fury.io/js/react-intense.svg)](https://badge.fury.io/js/react-intense) [![MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/brycedorn/react-intense/master/LICENSE)

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

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

## Usage

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

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

...

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

and you're good to go!

## Additional Props

Title/caption:
```javascript
<ReactIntense caption='caption' src='img.pg' title='title' />
```

Thumbnail image (for lazy loading of main image):
```javascript
<ReactIntense src='large_version.jpg' thumbnail='small_version.jpg' />
```

Trigger (override thumbnail image):
 - If you'd like to completely override the thumbnail image as the trigger for maximizing the image, you may pass in an entire React element.
 - It must accept an `onClick` prop in addition to the generic `className`, `ref`, and `style` props.
```javascript
<ReactIntense src='large_version.jpg' trigger={myTrigger} />
```

Vertical scrolling:
```javascript
<ReactIntense src='tall_img.jpg' vertical=true />
```

Scroll speed (default is `0.05`):
```javascript
<ReactIntense src='img.jpg' moveSpeed=0.05 />
```

Loading indicator (default is none):
 - Requires some CSS for [positioning](https://github.com/brycedorn/react-intense/blob/master/lib/ReactIntense.css#L67) and associated [`div` structure](https://github.com/brycedorn/react-intense/blob/master/lib/ReactIntense.js#L268); demo shows the `spin` loader from [loading.io](http://loading.io/) which is bundled in [`loader.css`](https://github.com/brycedorn/react-intense/blob/master/lib/loader.css).

```javascript
<ReactIntense src='img.jpg' loader='uil-spin-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](https://github.com/brycedorn/react-intense/issues) them!
 
## Thanks
* [<NAME>](https://github.com/tholman)
* [<NAME>](https://gist.github.com/paulirish/1579671)
* [loading.io](http://loading.io)<commit_msg>clean up readme a bit :dizzy:<commit_after># react-intense

[![npm version](https://badge.fury.io/js/react-intense.svg)](https://badge.fury.io/js/react-intense) [![MIT](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/brycedorn/react-intense/master/LICENSE)

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

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

## Usage

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

```javascript
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<any> | 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](https://github.com/brycedorn/react-intense/issues) them!
 
## Thanks
* [<NAME>](https://github.com/tholman)
* [<NAME>](https://gist.github.com/paulirish/1579671)
* [loading.io](http://loading.io)
{'fraction_non_alphanumeric': 0.15324015247776365, 'fraction_numerical': 0.0063532401524777635, 'mean_word_length': 4.822485207100592, 'pattern_counts': {'":': 0, '<': 20, '<?xml version=': 0, '>': 20, 'https://': 17, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2667434', 'n_tokens_mistral': 1320, 'n_tokens_neox': 1262, 'n_words': 338}