
Security News
Meet Socket at Black Hat and DEF CON 2025 in Las Vegas
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
react-simple-image
Advanced tools
react-simple-image
is a React Components of <img>
tag with cleaner srcset/sizes interface.
npm install --save react-simple-image
or,
yarn add react-simple-image
The <Image/>
component has two descriptor type:
alt - String
: (Required) alt textclassName - String
: (Optional) additional classNamesrc - String
: (Required) src attributesrcSet - Object
: (Required) src set
key: descriptor - Regexp
: width descriptor (e.g. 360w, 720w) or pixel descriptor (e.g. 1x, 1.5x, or 2x)value: src - String
: image paths/urlssizes - Array
: (Optional) sizez set for width descriptor
Object
size - String
: image sizemediaCondition - String
: to apply on the image sizeHere are some tips:
sizes
is not compatible with pixel descriptor. If you specify sizes
with pixel descriptor, it is gracefully ignored.width descriptor
and pixel descriptor
are not intended to use at the same time. If you declare both props, pixel descriptor
overwrites and width descriptor
props is ignoredFor more information, please reach out for:
<Image
alt='example'
className='additional-className'
src='example-small.png',
srcSet={{
'360w': 'example-small.png',
'720w': 'example-middle.png',
'1200w': 'example-large.png',
}},
sizes={[
{size: '100vw', mediaCondition: '(max-width: 30em)'},
{size: '50vw', mediaCondition: '(max-width: 50em)'},
{size: 'calc(33vw - 100px)'},
]},
/>
<Image
alt='example'
src='example-small.png',
srcSet={{
'360w': 'example-small.png',
'720w': 'example-middle.png',
'1200w': 'example-large.png',
}},
sizes={[
{size: '100vw', mediaCondition: '(max-width: 30em)'},
{size: '50vw', mediaCondition: '(max-width: 50em)'},
{size: 'calc(33vw - 100px)'},
]},
/>
<img
alt="example"
src="example-small.png"
srcset="example-small.png 360w,example-middle.png 720w,example-large.png 1200w"
sizes="(max-width: 30em) 100vw,(max-width: 50em) 50vw,calc(33vw - 100px)"
data-reactroot=""
data-reactid="1"
data-react-checksum="1197296813"/>
<Image
alt='example'
className='additional-className'
src='example.png',
srcSet={{
'1x': 'example.png',
'2x': 'example@2x.png',
}},
/>
<img
alt="example"
class="additional-className"
src="example.png"
srcset="example.png 1x,example@2x.png 2x"
data-reactroot=""
data-reactid="1"
data-react-checksum="1897738717"/>
Copyright (c) 2016 Bit Journey, Inc.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
FAQs
responsive tag with cleaner srcset/sizes interface.
The npm package react-simple-image receives a total of 3,509 weekly downloads. As such, react-simple-image popularity was classified as popular.
We found that react-simple-image demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 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
Meet Socket at Black Hat & DEF CON 2025 for 1:1s, insider security talks at Allegiant Stadium, and a private dinner with top minds in software supply chain security.
Security News
CAI is a new open source AI framework that automates penetration testing tasks like scanning and exploitation up to 3,600× faster than humans.
Security News
Deno 2.4 brings back bundling, improves dependency updates and telemetry, and makes the runtime more practical for real-world JavaScript projects.