@eisberg-labs/next-image-section

Image as background, React section with lazy loaded nextjs image as background and tailwind compatible

4.0.2
latest
Source
npm

Version published: 2 years ago

Weekly downloads: 0; decreased by-100%

Maintainers: 1

Weekly downloads

Created: 2 years ago

Source

Next Image as Background Section

React Section with lazy loaded nextjs image as background and tailwind, server component compatible. Img tag can be used as a background, it's usable for SEO, due to lazy loading and use of alt tags (speed and semantics).

Example

If you 👍 or use this project, consider giving it a ★, thanks! 🙌

Installation

Package uses Nextjs Image component, so having next.js installed is required. Don't forget to add allowed domains in next.config.js.

Component is compatible with server only components.

npm i --save @eisberg-labs/next-image-section

Usage

Import style.css in your global css file or directly in the component:

import ImageSection from '@eisberg-labs/next-image-section';
import '@eisberg-labs/next-image-section/style.css';

<ImageSection
  src={"https://pixabay.com/images/id-2748776"}
  alt={"Pixabay Milna Croatia photo and picture by k9arteu"}
  childClassName={"container bg-white"}
>
  <p className={"text-xl"}>You can see in this example that img tag can work as a background.</p>
</ImageSection>

Api

License

Keywords

FAQs

What is @eisberg-labs/next-image-section?

Is @eisberg-labs/next-image-section popular?

Is @eisberg-labs/next-image-section well maintained?

Package last updated on 25 Jan 2023

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.

Install

@eisberg-labs/next-image-section