Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
remix-image
Advanced tools
remix-image - npm Package Compare versions
Comparing version 0.1.8 to 0.2.0
| { | ||
| "name": "remix-image", | ||
| "version": "0.1.8", | ||
| "version": "0.2.0", | ||
| "description": "A React component for responsive images in Remix", | ||
@@ -13,2 +13,3 @@ "author": "Josh McFarlin <josh@mcfarl.in>", | ||
| ], | ||
| "homepage": "https://remix-image.mcfarl.in", | ||
| "repository": { | ||
@@ -15,0 +16,0 @@ "type": "git", |
186
README.md
@@ -39,3 +39,3 @@ # Remix-Image | ||
| To install this library and its peer deps, use on of the following commands: | ||
| To install this library, use on of the following commands: | ||
| ```bash | ||
@@ -46,187 +46,9 @@ npm install -S remix-image | ||
| --- | ||
| ### Docs | ||
| ### Loader | ||
| - Documentation for this library can be found at: [https://remix-image.mcfarl.in](https://remix-image.mcfarl.in) | ||
| - Several examples can be found in [examples/](examples/) | ||
| Create a new resource route that imports the `imageLoader` function and exports as `loader`. | ||
| By default, the image component uses the route `"/api/image"`, but any route can be used. | ||
| ```typescript jsx | ||
| import type { LoaderFunction } from "remix"; | ||
| import { imageLoader, DiskCache, MemoryCache } from "remix-image/server"; | ||
| import sharp from "sharp"; | ||
| const config = { | ||
| selfUrl: "http://localhost:3000", | ||
| whitelistedDomains: ["i.imgur.com"], | ||
| cache: new DiskCache(), | ||
| transformer: sharp | ||
| }; | ||
| export const loader: LoaderFunction = ({ request }) => { | ||
| return imageLoader(config, request); | ||
| }; | ||
| ``` | ||
| #### Options | ||
| | Name | Type | Required | Default | Description | | ||
| |:------------------:|:-----------:|:--------:|:---------------:|:------------------------------------------------------------------------------------------------------------------:| | ||
| | selfUrl | string | X | | The URL of the local server. | | ||
| | cache | Cache | | | The configuration for the local image cache. Setting this to null will disable the cache. | | ||
| | transformer | Transformer | | pureTransformer | The image transformation library to use. | | ||
| | resolver | Resolver | | fetchResolver | The image resolver to use. | | ||
| #### Cache Types | ||
| | Name | Description | Options | | ||
| |-------------|----------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------| | ||
| | DiskCache | A cache that stores images in memory and on disk (depending on size) for the best efficiency. To use, install the `hybrid-disk-cache` library from npm. | { path: string, ttl: number, tbd: number } | | ||
| | MemoryCache | A cache that only stores images in memory. Designed for platforms that do not have native disk access like Cloudflare. | { maxSize: number (bytes), ttl: number, tbd: number } | | ||
| **Note:** | ||
| Due to [remix request purging](https://remix.run/docs/en/v1.1.1/other-api/serve), `MemoryCache` will clear itself automatically on each request in development. This will not occur during production, and it will perform as expected. | ||
| #### Transformer Types | ||
| | Name | Description | | ||
| |-----------------|----------------------------------------------------------------------------------------------------------------------------------| | ||
| | pureTransformer | The default image transformer, supports all platforms at the cost of performance. | | ||
| | sharp | A faster image transformer that uses the file-system, offers the best performance. To use, install the `sharp` library from npm. | | ||
| #### Resolver Types | ||
| | Name | Description | | ||
| |---------------|---------------------------------------------------------------------------------------------------------------------------| | ||
| | fetchResolver | The default image resolver, fetches images over the network. | | ||
| | fsResolver | An image resolver that retrieves local images from the file-system. | | ||
| | kvResolver | A resolver for assets stored in Workers KV (for retrieving local images on Remix projects hosted on Cloudflare Workers.) To use, install the `@cloudflare/kv-asset-handler` library from npm. | | ||
| You can create a custom resolver by combining resolvers and passing this to the loader options: | ||
| ```typescript jsx | ||
| import { | ||
| imageLoader, | ||
| MemoryCache, | ||
| kvResolver, | ||
| fetchResolver, | ||
| } from "remix-image/serverPure"; | ||
| const whitelistedDomains = new Set(["http://localhost:3000", "i.imgur.com"]); | ||
| export const myResolver = async ( | ||
| asset: string, | ||
| url: string | ||
| ): Promise<{ | ||
| buffer: Buffer; | ||
| contentType: string; | ||
| }> => { | ||
| if (asset.startsWith("/") && (asset.length === 1 || asset[1] !== "/")) { | ||
| return kvResolver(asset, url); | ||
| } else { | ||
| if (!whitelistedDomains.has(new URL(url).host)) { | ||
| throw new Error("Domain not allowed!"); | ||
| } | ||
| return fetchResolver(asset, url); | ||
| } | ||
| }; | ||
| const config = { | ||
| selfUrl: "http://localhost:3000", | ||
| cache: new MemoryCache(), | ||
| resolver: myResolver, | ||
| }; | ||
| export const loader: LoaderFunction = ({ request }) => { | ||
| return imageLoader(config, request); | ||
| }; | ||
| ``` | ||
| #### Platforms Without File-System Access | ||
| Some platforms like Cloudflare Workers do not support file-systems and some Node packages. | ||
| In this case, use `MemoryCache` and `pureTransformer` because they are pure JavaScript. | ||
| **Note**: Because of bundling issues, you must import these helpers from `remix-image/serverPure`. | ||
| ```typescript jsx | ||
| import type { LoaderFunction } from "remix"; | ||
| import { imageLoader, MemoryCache, pureTransformer } from "remix-image/serverPure"; | ||
| const config = { | ||
| selfUrl: "http://localhost:3000", | ||
| whitelistedDomains: ["i.imgur.com"], | ||
| cache: new MemoryCache(), | ||
| transformer: pureTransformer | ||
| }; | ||
| export const loader: LoaderFunction = ({ request }) => { | ||
| return imageLoader(config, request); | ||
| }; | ||
| ``` | ||
| For an example project hosted on Cloudflare Workers, look at [this example](examples/cloudflare). | ||
| --- | ||
| ### Component | ||
| Import the `Image` component and specify the url to the resource route used by the `imageLoader` function. | ||
| The `loaderUrl` prop is optional if the resource route has been created at the path `"/api/image"`. | ||
| ```typescript jsx | ||
| import { Image } from "remix-image"; | ||
| <Image | ||
| loaderUrl="/api/image" | ||
| src="..." | ||
| width="..." | ||
| height="..." | ||
| alt="..." | ||
| responsive={[ | ||
| { | ||
| size: { | ||
| width: 100, | ||
| height: 100, | ||
| }, | ||
| maxWidth: 200, | ||
| }, | ||
| ]} | ||
| /> | ||
| ``` | ||
| #### PropTypes | ||
| | Name | Type | Required | Default | Description | | ||
| |:----------:|:------------------------------------------------------------------:|:--------:|:------------:|:--------------------------------------------------------------------------------------------:| | ||
| | loaderUrl | string | | "/api/image" | The path of the image loader resource route. | | ||
| | responsive | { size: { width: number; height: number; }; maxWidth?: number; }[] | | [] | An array of responsive sizes. The resource route is not called if this prop is not provided. | | ||
| --- | ||
| ### Hook | ||
| Optionally, this library also exports the hook used to generate responsive props for images. | ||
| In most use cases you can simply use the `Image` component, but you might need the hook for custom components. | ||
| ```typescript jsx | ||
| import { useResponsiveImage } from "remix-image"; | ||
| const Image: React.FC<ImageProps> = ({ | ||
| className, | ||
| loaderUrl = "/api/image", | ||
| responsive = [], | ||
| ...imgProps | ||
| }) => { | ||
| const responsiveProps = useResponsiveImage(imgProps, loaderUrl, responsive); | ||
| return ( | ||
| <img | ||
| className={clsx(classes.root, className)} | ||
| {...imgProps} | ||
| {...responsiveProps} | ||
| /> | ||
| ); | ||
| }; | ||
| ``` | ||
| #### Parameters | ||
| | Name | Type | Required | Default | Description | | ||
| |:----------:|:------------------------------------------------------------------:|:--------:|:-------:|:-----------------------------------------------:| | ||
| | imgProps | ComponentPropsWithoutRef<"img"> | X | | The props to be passed to the base img element. | | ||
| | loaderUrl | string | X | [] | The path of the image loader resource route. | | ||
| | responsive | { size: { width: number; height: number; }; maxWidth?: number; }[] | | [] | An array of responsive sizes. | | ||
| ## Other | ||
@@ -233,0 +55,0 @@ |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
No website
QualityPackage does not have a website.
Found 1 instance in 1 package
Improved metrics
- Number of low quality alerts
- decreased by-50%
1
- Number of medium supply chain risk alerts
- decreased by-11.11%
8
Worsened metrics
- Total package byte prevSize
- decreased by-0.37%
3924198
- Lines of code
- decreased by-0.53%
37841
- Number of lines in readme file
- decreased by-73.25%
65
- Number of low supply chain risk alerts
- increased by11.11%
10
No dependency changes