<commit_before># Imager.jsx

> A React component for responsive images in desktop and mobile browsers. Featuring [Imager.js](https://github.com/BBC-News/Imager.js)!

React is used for the initial component rendering.
Its batched state update mechanism is then used to handle multiple image size at once, to avoid layout thrashing.

# Install

*Imager.jsx* is a browserifiable Node module.

```bash
npm i --save imager.jsx
```

If you want to generate a static artifact, clone the repository and run the following commands:

```bash
npm install
npm run build
```

# Usage

*Imager.jsx* is a two-steps use.

## The React Factory

The factory associates an [Imager.js](https://github.com/BBC-News/Imager.js) behaviour with a React component.

```js
var Imager = require('imager.jsx');

var ResponsiveImage = Imager({
  availableWidths: [333, 444, 555],
  availablePixelRatios: [1, 1.3, 2]
});
```

Please refer to the [Imager.js JavaScript Configuration documentation](https://github.com/BBC-News/Imager.js#javascript-configuration) for more informations.

## The React Component

The React component is used to render a responsive image (an `<img />` HTML element).

```html
<ResponsiveImage
 src="http://placehold.it/{width}"
 className="responsive-image"
 alt="alternative text" />
```

The only mandatory attribute is `src`, the equivalent of [Imager.js `data-src` attribute](https://github.com/BBC-News/Imager.js#data-src).

`className` and `alt` are respectively rendered as `class` and `alt` HTML attributes.

# Examples

Clone the project and open the [demo.html page](demo/index.html) for live examples.

## `<img />` element

```js
React.render(<ResponsiveImage src="http://placehold.it/{width}" />, container);
```

## `<div style="background-image: ..." />` element

```js
React.render(<ResponsiveImage src="http://placehold.it/{width}x{height}">
  <h2>Tile title</h2>
</ResponsiveImage>, container);
```<commit_msg>HTML rendering.<commit_after># Imager.jsx

> A React component for responsive images in desktop and mobile browsers. Featuring [Imager.js](https://github.com/BBC-News/Imager.js)!

React is used for the initial component rendering.
Its batched state update mechanism is then used to handle multiple image size at once, to avoid layout thrashing.

# Install

*Imager.jsx* is a browserifiable Node module.

```bash
npm i --save imager.jsx
```

If you want to generate a static artifact, clone the repository and run the following commands:

```bash
npm install
npm run build
```

# Usage

*Imager.jsx* is a two-steps use.

## The React Factory

The factory associates an [Imager.js](https://github.com/BBC-News/Imager.js) behaviour with a React component.

```js
var Imager = require('imager.jsx');

var ResponsiveImage = Imager({
  availableWidths: [333, 444, 555],
  availablePixelRatios: [1, 1.3, 2]
});
```

Please refer to the [Imager.js JavaScript Configuration documentation](https://github.com/BBC-News/Imager.js#javascript-configuration) for more informations.

## The React Component

The React component is used to render a responsive image (an `<img />` HTML element).

```html
<ResponsiveImage
 src="http://placehold.it/{width}"
 className="responsive-image"
 alt="alternative text" />
```

The only mandatory attribute is `src`, the equivalent of [Imager.js `data-src` attribute](https://github.com/BBC-News/Imager.js#data-src).

`className` and `alt` are respectively rendered as `class` and `alt` HTML attributes.

# Examples

Clone the project and open the [demo.html page](demo/index.html) for live examples.

## `<img />` element

```js
React.render(<ResponsiveImage src="http://placehold.it/{width}" />, container);
```

This is rendered as:

```html
<img src="http://placehold.it/736" class="image-replace" data-src="http://placehold.it/{width}" alt="">
```

## `<div style="background-image: ..." />` element

```js
React.render(<ResponsiveImage src="http://placehold.it/{width}x{height}">
  <h2>Tile title</h2>
</ResponsiveImage>, container);
```

This is rendered as:

```html
<div style="background-image: url(http://placehold.it/375x640);" class="image-replace" data-src="http://placehold.it/{width}x{height}">
  <h2>Tile title</h2>
</div>
```
{'fraction_non_alphanumeric': 0.14865187306132188, 'fraction_numerical': 0.009782868050584585, 'mean_word_length': 4.750342935528121, 'pattern_counts': {'":': 0, '<': 26, '<?xml version=': 0, '>': 28, 'https://': 8, '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': '6377131', 'n_tokens_mistral': 1395, 'n_tokens_neox': 1300, 'n_words': 416}