npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@graphcms/react-image

v1.1.0

Published

<h1 align="center">@graphcms/react-image</h1>

Downloads

980

Readme

  • Resize large images to the size needed by your design.
  • Generate multiple smaller images to make sure devices download the optimal-sized one.
  • Automatically compress and optimize your image with the powerful Filestack API.
  • Efficiently lazy load images to speed initial page load and save bandwidth.
  • Use the "blur-up" technique or solid background color to show a preview of the image while it loads.
  • Hold the image position so your page doesn't jump while images load.

Quickstart

Here's an example using a static asset object.

import React from "react";
import Image from "@graphcms/react-image";

const IndexPage = () => {
  const asset = {
    handle: "uQrLj1QRWKJnlQv1sEmC",
    width: 800,
    height: 800
  }
  
  return <Image image={asset} maxWidth={800} />
}

Install

npm install @graphcms/react-image

Props

| Name | Type | Description | | ----------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | image | object | An object of shape { handle, width, height }. Handle is an identifier required to display the image and both width and height are required to display a correct placeholder and aspect ratio for the image. You can get all 3 by just putting all 3 in your image-getting query. | | maxWidth | number | Maximum width you'd like your image to take up. (ex. If your image container is resizing dynamically up to a width of 1200, put it as a maxWidth) | | fadeIn | bool | Do you want your image to fade in on load? Defaults to true | | fit | "clip"\|"crop"\|"scale"\|"max" | When resizing the image, how would you like it to fit the new dimensions? Defaults to crop. You can read more about resizing here | | withWebp | bool | If webp is supported by the browser, the images will be served with .webp extension. (Recommended) | | transforms | array | Array of strings, each representing a separate Filestack transform, eg. ['sharpen=amount:5', 'quality=value:75'] | | title | string | Passed to the img element | | alt | string | Passed to the img element | | className | string\|object | Passed to the wrapper div. Object is needed to support Glamor's css prop | | outerWrapperClassName | string\|object | Passed to the outer wrapper div. Object is needed to support Glamor's css prop | | style | object | Spread into the default styles in the wrapper div | | position | string | Defaults to relative. Pass in absolute to make the component absolute positioned | | blurryPlaceholder | bool | Would you like to display a blurry placeholder for your loading image? Defaults to true. | | backgroundColor | string\|bool | Set a colored background placeholder. If true, uses "lightgray" for the color. You can also pass in any valid color string. | | onLoad | func | A callback that is called when the full-size image has loaded. | | baseURI | string | Set the base src from where the images are requested. Base URI Defaults to https://media.graphassets.com |