TwicPics components is a library of components to provide context-aware optimization for images and videos. They come with best practices out of the box: lazy loading, Low Quality Image Placeholders, optimized Cumulative Layout Shift (CLS), and more.

This project is available as an NPM package: @twicpics/components.

Installation:

# with yarn
yarn add @twicpics/components

# or with NPM
npm install @twicpics/components

Read the documentation.

This project uses yarn as dependency manager.

Simply type yarn build. Dependencies are installed automatically.

To run tests, use the following commands:

# testing common code accross all frameworks
yarn test:common

# testing ui
yarn test:ui

# testing ui for specific frameworks
yarn test:ui react svelte          # only test UI for react and svelte3, svelte4, svelte5 and sveltekit
yarn test:ui ^vue                  # test UI for all frameworks except vue2 and vue3