0.0.28 • Published 4 months ago

@px-do/next-contentful-picture v0.0.28

Weekly downloads
-
License
MIT
Repository
github
Last release
4 months ago

next-contentful-picture

A simple Contentful image implementation for your NextJS applications utilizing <picture> elements to support the various image-formats.

The contentful API still does not support automatic responses for image-types.

Features

  • uses <source> elements to display avif, wepb and png sources
  • allows for native contentful image params/options
  • allows for different aspect-ratios on different breakpoints (TODO*)
  • uses @react-waypoint to defer loading images
  • can give images priority for prefetching in <head>
  • added support for nextJS app directory, set the flag useAppDir to true

Installation

#npm
npm install -S px-do/next-contentful-picture

#yarn
yarn add px-do/next-contentful-picture

#pnpm
pnpm i -S px-do/next-contentful-picture

Usage

Minimal Implementation:

import {ContentfulFigure} from './ContentfulFigure';
import {FunctionComponent} from 'react';
import {Asset} from 'contentful';

const Foo: FunctionComponent<{ asset: Asset }> = ({ asset }) => {
  return <ContentfulFigure image={asset} />  
}

Required packages

nextjsimagecontenfulloader
react-intersection-observer
@infinitebrahmanuniverse/nolb-_px@everything-registry/sub-chunk-746
0.0.28

4 months ago

0.0.27

4 months ago

0.0.26

5 months ago

0.0.20

12 months ago

0.0.21

12 months ago

0.0.22

12 months ago

0.0.23

12 months ago

0.0.24

12 months ago

0.0.17

1 year ago

0.0.18

1 year ago

0.0.19

1 year ago

0.0.15

1 year ago

0.0.16

1 year ago

0.0.10

1 year ago

0.0.11

1 year ago

0.0.12

1 year ago

0.0.13

1 year ago

0.0.14

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago