@mapbox/appropriate-images-react - npm Package Compare versions

Comparing version 0.1.2 to 1.0.0

package.json

 {
   "name": "@mapbox/appropriate-images-react",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "description": "Examples showing how to use the resized, optimized images that you generated with appropriate-images in React",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -5,15 +5,17 @@ # @mapbox/appropriate-images-react
 
-🚧🚧 **EXPERIMENTAL! WORK IN PROGRESS!** 🚧🚧
-
 **Use in combination with [appropriate-images].**
 
 After you've generated resized, optimized images with [appropriate-images], you'll want to use them in the browser.
-If you use React, you'll want to use them with React.
-You'll need to determine *which variant* of the image to load — that is, which size, and whether to load `.webp` or not.
-This module does that. It
+If you like React, you'll want to use them with React.
+You'll need to determine *which variant* of the image to load — that is, which size, and whether to load the `.webp` version or not.
+This module does that.
 
-- measures the element's available width with [react-simple-surveyor](https://github.com/mapbox/react-simple-surveyor);
-- combines that width with your [appropriate-images configuration] to get a URL, using [appropriate-images-get-url];
-- then renders the appropriate variant of the image.
+Here are the steps it takes.
 
+- Measures the element's available width with [react-simple-surveyor](https://github.com/mapbox/react-simple-surveyor);
+- Combines that width with your [appropriate-images configuration] to get a URL, using [appropriate-images-get-url];
+- Then renders the appropriate variant of the image.
+
+(If you aren't using React but want to use your [appropriate-images] in the browser, check out [appropriate-images-get-url](https://github.com/mapbox/appropriate-images-get-url)).
+
 ## API
@@ -23,25 +25,23 @@
 
-```
-scopeAppropriateImage(imageConfig: Object, options?: Object): Component
-```
+`appropriateImagesReact.scopeAppropriateImage(imageConfig, [options])`
 
-Creates a React component scoped according to your configuration and options.
+Returns an [AppropriateImage component](#appropriateimage) scoped according to your [appropriate-images configuration] and options.
 
 #### imageConfig
 
-`Object` - (required)
+Type `Object`.
+**Required**.
 
 Your [appropriate-images configuration].
-**Use the same configuration at run time, in the browser, as you do at build time, when generating resized, optimized images.**
+**Use the same configuration at run time, in the browser, as you do at build time, when generating the resized, optimized images.**
 
 #### options
 
-`?Object`
-
 ##### transformUrl
 
-`?Function` - Default: `x => x`
+Type: `(originalUrl: string) => string`.
+Default: `x => x`.
 
 If you want to transform the URL in some way, use this function.
-The original use-case is to use Webpack's augmented `require()` to get the URL *that Webpack creates* — if, for example, you're adding a hash to the end of files loaded with the file-loader.
+One use-case is to take advantage of Webpack's augmented `require()` to get the URL *that Webpack creates* — if, for example, you're adding a hash to the end of files loaded with [Webpack's file-loader](https://github.com/webpack-contrib/file-loader).
 
@@ -59,3 +59,4 @@ For example:
 
-`?number` - Default: `1.3`
+Type: `number`.
+Default: `1.3`.
 
@@ -76,7 +77,8 @@ See [the same option for appropriate-images-get-url](https://github.com/mapbox/appropriate-images-get-url#hiresratio).
 
-**All additional props are applied directly to the rendered element** (e.g. `alt`, `id`, `data-*`, `aria-*`).
+All props you pass other than those documented below are applied directly to the rendered element (e.g. `alt`, `id`, `data-*`, `aria-*`).
 
 ##### imageId
 
-`string` - (required)
+Type `string`.
+**Required**.
 
@@ -88,3 +90,4 @@ The id of the image to render.
 
-`boolean` - Default: `false`
+Type `boolean`.
+Default: `false`.
 
@@ -96,3 +99,4 @@ By default, an `<img>` element is rendered.
 
-`string` - Default: `center center`
+Type `string`.
+Default: `'center center'`.
 
@@ -104,3 +108,4 @@ **Only meaningful if `background={true}`.**
 
-`string` - Default: `cover`
+Type `string`.
+Default: `'cover'`.
 
@@ -107,0 +112,0 @@ **Only meaningful if `background={true}`.**

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13001

increased by3.17%

Number of package files

6

increased by20%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

133

increased by3.91%

No dependency changes