0.0.28 • Published 1 year ago

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

Weekly downloads
-
License
MIT
Repository
github
Last release
1 year 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

1 year ago

0.0.27

2 years ago

0.0.26

2 years ago

0.0.20

2 years ago

0.0.21

2 years ago

0.0.22

2 years ago

0.0.23

2 years ago

0.0.24

2 years ago

0.0.17

2 years ago

0.0.18

2 years ago

0.0.19

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.10

2 years ago

0.0.11

2 years ago

0.0.12

2 years ago

0.0.13

2 years ago

0.0.14

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago