Skip to content

Commit

Permalink
docs: add documentation to README
Browse files Browse the repository at this point in the history
  • Loading branch information
cecchi authored and frederickfogerty committed Aug 5, 2021
1 parent 70ab7c9 commit 98913ed
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 25 deletions.
57 changes: 33 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -218,7 +218,11 @@ Fixed image rendering will automatically append a variable `q` parameter mapped
This behavior will respect any overriding `q` value passed in via `imgixParams` and can be disabled altogether with the boolean property `disableQualityByDPR`.

```js
<Imgix src="https://domain.imgix.net/image.jpg" width={100} disableQualityByDPR />
<Imgix
src="https://domain.imgix.net/image.jpg"
width={100}
disableQualityByDPR
/>
```

will generate the following srcset:
Expand Down Expand Up @@ -299,15 +303,15 @@ import Imgix, { Picture, Source } from "react-imgix";
In order to reduce the duplication in props, JSX supports object spread for props:

```js
import Imgix, { Picture, Source } from 'react-imgix'
import Imgix, { Picture, Source } from "react-imgix";

const commonProps = {
src: 'https://...',
src: "https://...",
imgixParams: {
fit: 'crop',
crop: 'faces'
}
}
fit: "crop",
crop: "faces",
},
};

<Picture>
<Source
Expand All @@ -321,7 +325,7 @@ const commonProps = {
htmlAttributes={{ media: "(min-width: 320px)" }}
/>
<Imgix src={src} width={100} />
</Picture>
</Picture>;
```

A warning is displayed when no fallback image is passed. This warning can be disabled in special circumstances. To disable this warning, look in the [warnings section](#warnings).
Expand Down Expand Up @@ -409,7 +413,7 @@ The props that `<ImgixProvider>` makes accessible can also be overridden by `<Im
{
/*... */
}
<ImgixProvider imgixParams={{ ar: "16:9", fit:"crop" }}>
<ImgixProvider imgixParams={{ ar: "16:9", fit: "crop" }}>
<div className="intro-blurb">{/* ... */}s</div>
<div className="gallery">
<Imgix
Expand Down Expand Up @@ -683,6 +687,10 @@ This re-maps src to `data-src`, srcSet to `data-srcset`, etc.

Disable generation of variable `q` parameters when rendering a fixed-size image.

##### srcSetOptions :: object

Allows customizing the behavior of the srcset generation. Valid options are `widths`, `widthTolerance`, `minWidth`, and `maxWidth`. See [@imgix/js-core](https://github.com/imgix/js-core#imgixclientbuildsrcsetpath-params-options) for documentation of these options.

#### Picture Props

##### className :: string
Expand Down Expand Up @@ -793,21 +801,22 @@ To upgrade to version 8, the following changes should be made.
- Change all usages of `type='picture'` to `<Picture>` and `type='source'` to `<Source>`

<!-- prettier-ignore-start -->
```jsx
// this...
<Imgix type='picture'>
<Imgix type='source' src={src}>
<Imgix type='source' src={src}>
</Imgix>

// becomes...
<Picture>
<Source src={src}>
<Source src={src}>
</Picture>
```

See [Picture support](#picture-support) for more information.

```jsx
// this...
<Imgix type='picture'>
<Imgix type='source' src={src}>
<Imgix type='source' src={src}>
</Imgix>

// becomes...
<Picture>
<Source src={src}>
<Source src={src}>
</Picture>
```

See [Picture support](#picture-support) for more information.
<!-- prettier-ignore-end -->

- Remove all usage of `type='bg'` as it is no longer supported. It was decided that it was too hard to implement this feature consistently. If you would still like to use this feature, please give this issue a thumbs up: [https://github.com/imgix/react-imgix/issues/160](https://github.com/imgix/react-imgix/issues/160) If we get enough requests for this, we will re-implement it.
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"Sherwin Heydarbeygi <[email protected]> (https://github.com/sherwinski)",
"Baldur Helgason <[email protected]> (https://github.com/baldurh)",
"Tanner Stirrat <[email protected]> (https://github.com/tstirrat15)",
"Stephen Cook <[email protected]> (https://github.com/stephencookdev)"
"Stephen Cook <[email protected]> (https://github.com/stephencookdev)",
"Cecchi MacNaughton <[email protected]> (https://github.com/cecchi)"
],
"license": "ISC",
"bugs": {
Expand Down

0 comments on commit 98913ed

Please sign in to comment.