Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
@mapbox/appropriate-images-react
Advanced tools
Changelog
2.3.0
Readme
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 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.
Here are the steps it takes.
(If you aren't using React but want to use your appropriate-images in the browser, check out appropriate-images-get-url).
scopeAppropriateImage(imageConfig, [options])
A named import for ES2015 modules, or a property on the CommonJS module.
import { scopeAppropriateImage } from '@mapbox/appropriate-images-react';
// OR
const scopeAppropriateImage = require('@mapbox/appropriate-images-react').scopeAppropriateImage;
Returns an AppropriateImage component scoped according to your appropriate-images configuration and options.
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 the resized, optimized images.
Type: (originalUrl: string) => string
.
Default: x => x
.
If you want to transform the URL in some way, use this function.
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.
For example:
import { scopeAppropriateImage } from '@mapbox/appropriate-images-react';
const AppropriateImage = scopeAppropriateImage(myImageConfig, {
transformUrl: url => require(`/my/image/directory/${url}`)
});
Type: number
.
Default: 1.3
.
See the same option for appropriate-images-get-url.
This is the component that is returned by scopeAppropriateImage
.
It can render your image in two ways:
<img>
.
Usually you'll do this.<div>
.
This can be handy in situations when you want to take advantage of powerful CSS background properties like background-size
and background-position
.All props you pass other than those documented below are applied directly to the rendered element (e.g. alt
, id
, data-*
, aria-*
).
Type string
.
Required.
The id of the image to render. Must correspond with a key in the appropriate-images configuration.
Type boolean
.
Default: false
.
By default, an <img>
element is rendered.
If this option is true
, you instead get a <div>
, absolutely positioned to fill its container, whose background-image
will be the appropriate image.
Type string
.
Default: 'center center'
.
Only meaningful if background={true}
.
Any background-position
value will do.
Type string
.
Default: 'cover'
.
Only meaningful if background={true}
.
Any background-size
value will do.
const React = require('react');
const { scopeAppropriateImage } = require('@mapbox/appropriate-images-react');
const imageConfig = require('./path/to/my/image-config.js');
const AppropriateImage = scopeAppropriateImage(imageConfig);
class MyPage extends React.PureComponent {
render() {
return (
<div>
<p>An appropriate image will be loaded below:</p>
<AppropriateImage imageId="bear" style={{ maxWidth: '100%' }}/>
</div>
);
}
}
FAQs
Use images optimized with appropriate-images in React
The npm package @mapbox/appropriate-images-react receives a total of 31 weekly downloads. As such, @mapbox/appropriate-images-react popularity was classified as not popular.
We found that @mapbox/appropriate-images-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 28 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.