### Complete TwicPics Web Components JavaScript Setup Example

Source: https://github.com/twicpics/components/blob/main/src/_documentation/webComponents.md

This example illustrates a full setup in a main JavaScript file, combining the import of `installTwicpics` and `TwicImg`, configuring the TwicPics domain, and defining the `twic-img` custom element for use in your HTML.

```js
// Here is an example of a main file configured with TwicPics.
import { installTwicpics, TwicImg } from "@twicpics/components/webcomponents";

installTwicpics( {
  // domain is mandatory
  "domain": `https://<your-domain>.twic.pics`
} );

customElements.define( `twic-img`, TwicImg );
```

--------------------------------

### Complete TwicPics Setup in Main JavaScript File

Source: https://github.com/twicpics/components/blob/main/documentation/webComponents.md

This example illustrates a complete setup in a main JavaScript file, combining imports, `installTwicpics` configuration, and defining the `twic-img` custom element. It provides a ready-to-use template for integrating TwicPics.

```js
// Here is an example of a main file configured with TwicPics.
import { installTwicpics, TwicImg } from "@twicpics/components/webcomponents";

installTwicpics( {
  // domain is mandatory
  "domain": `https://<your-domain>.twic.pics`
} );

customElements.define( `twic-img`, TwicImg );
```

--------------------------------

### Complete Vue2 Application Startup with TwicPics

Source: https://github.com/twicpics/components/blob/main/documentation/vue2.md

A comprehensive example of a `main.js` file for a Vue2 application, illustrating the complete setup process for TwicPics components, including plugin imports, configuration with a domain, and Vue instance initialization.

```js
// Here is an example of a `Vue2` app startup configured with TwicPics.
import Vue from "vue";
import App from "./App.vue";

// import TwicPics plugin
import TwicPics from "@twicpics/components/vue2";
import "@twicpics/components/style.css";

// configure TwicPics plugin
Vue.use(TwicPics, {
  domain: "https://<your-domain>.twic.pics"
});

new Vue({
  render: (h) => h(App)
}).$mount("#app");
```

--------------------------------

### Complete Svelte3 main.js Setup with TwicPics

Source: https://github.com/twicpics/components/blob/main/src/_documentation/svelte3.md

This example illustrates a typical `main.js` file for a Svelte3 application, demonstrating the full integration of TwicPics Components. It includes importing the necessary modules, configuring TwicPics with your domain, and initializing the main Svelte application.

```js
// Here is an example of a `Svelte3` app startup configured with TwicPics.
import { installTwicpics } from "@twicpics/components/svelte3";
import "@twicpics/components/style.css";

import App from "./App.svelte";

installTwicpics({
  "domain": `https://<your-domain>.twic.pics`
});

const app = new App({
  target: document.body
});

export default app;
```

--------------------------------

### SvelteKit `+layout.svelte` Example for TwicPics Setup

Source: https://github.com/twicpics/components/blob/main/src/_documentation/svelteKit.md

This example illustrates a complete `+layout.svelte` file, which serves as the main layout for a SvelteKit application. It includes the necessary script block to import and configure TwicPics components, ensuring they are available across all pages.

```html
<script>
  // Here is an example of +layout.svelte file
  import { installTwicPics } from "@twicpics/components/sveltekit";
  import "@twicpics/components/style.css";
  installTwicPics( {
      "domain": `https://<your-domain>.twic.pics`,
  } );
</script>
<slot />
```

--------------------------------

### Full Svelte4 App Startup Configuration with TwicPics

Source: https://github.com/twicpics/components/blob/main/src/_documentation/svelte4.md

This example illustrates a complete `main.js` file for a Svelte4 application, showing how to properly configure TwicPics Components during the app's startup, including all required imports and domain setup.

```JavaScript
// Here is an example of a `Svelte4` app startup configured with TwicPics.
import { installTwicpics } from "@twicpics/components/svelte4";
import "@twicpics/components/style.css";

import App from "./App.svelte";

installTwicpics({
  "domain": `https://<your-domain>.twic.pics`
});

const app = new App({
  target: document.body
});

export default app;
```

--------------------------------

### Example SvelteKit `+layout.svelte` for TwicPics Integration

Source: https://github.com/twicpics/components/blob/main/documentation/svelteKit.md

This complete example shows how to structure a `+layout.svelte` file in a SvelteKit project to include the TwicPics component imports and initialization, ensuring the setup applies globally across your application's pages.

```html
<script>
  // Here is an example of +layout.svelte file
  import { installTwicPics } from "@twicpics/components/sveltekit";
  import "@twicpics/components/style.css";
  installTwicPics( {
      "domain": `https://<your-domain>.twic.pics`,
  } );
</script>
<slot />
```

--------------------------------

### Example Nuxt.js configuration with TwicPics

Source: https://github.com/twicpics/components/blob/main/src/_documentation/nuxt2.md

A complete example of `nuxt.config.js` showing how to integrate TwicPics components, including head configuration and the TwicPics module setup.

```JavaScript
export default {
  head: {
    title: "TwicPics x Nuxt2",
  },
  modules: ["@twicpics/components/nuxt2"],
  twicpics: {
    "https://<your-domain>.twic.pics"
  },
};
```

--------------------------------

### Svelte3 App Startup Configuration Example with TwicPics

Source: https://github.com/twicpics/components/blob/main/documentation/svelte3.md

A complete example of a `main.js` file for a Svelte3 application, demonstrating the full integration of TwicPics Components during app startup, including imports and configuration.

```javascript
// Here is an example of a `Svelte3` app startup configured with TwicPics.
import { installTwicpics } from "@twicpics/components/svelte3";
import "@twicpics/components/style.css";

import App from "./App.svelte";

installTwicpics({
  "domain": `https://<your-domain>.twic.pics`
});

const app = new App({
  target: document.body
});

export default app;
```

--------------------------------

### Complete TwicPics Web Components HTML Setup Example

Source: https://github.com/twicpics/components/blob/main/src/_documentation/webComponents.md

This snippet demonstrates how to set up TwicPics components directly within an HTML file using a script with `type="module"`. It includes importing necessary functions, configuring the domain, and defining the `twic-img` custom element for client-side rendering.

```html
// Other example with configuration embeded in an html file
// and a full client side consideration
<script type="module">
  import {
    installTwicpics,
    TwicImg
  } from "./node_modules/@twicpics/components/webcomponents/module.mjs";

  installTwicpics({
    "domain": `https://<your-domain>.twic.pics`
  });

  // define the custom element alias
  customElements.define(`twic-img`, TwicImg);
</script>
```

--------------------------------

### Install and Configure Expo Modules for React Native CLI Projects

Source: https://github.com/twicpics/components/blob/main/documentation/react-native.md

Initial setup command for React Native CLI projects to install and configure the base Expo package, which is a prerequisite for using other Expo modules.

```Bash
npx install-expo-modules@latest
```

--------------------------------

### Complete TwicPics Setup in React 18+ Application

Source: https://github.com/twicpics/components/blob/main/src/_documentation/react.md

This example demonstrates the complete integration of TwicPics Components into a React 18+ application's entry point (`index.jsx`), showcasing imports, configuration, and the modern `createRoot` API for rendering.

```jsx
import React from "react";
import { createRoot } from 'react-dom/client';
import Root from "./root.jsx";

// TwicPics Components importation
import { installTwicpics } from "@twicpics/components/react";
import "@twicpics/components/style.css";

// TwicPics Components configuration (see Setup Options)
installTwicpics( {
  // domain is mandatory
  "domain": "https://<your-domain>.twic.pics"
} );

const container = document.getElementById('root');
const root = createRoot(container); 

root.render(
      <Root />
);
```

--------------------------------

### Implementing Resolution Switching with TwicPicture

Source: https://github.com/twicpics/components/blob/main/documentation/svelte4.md

Shows various configurations for the TwicPicture component to serve different image resolutions based on `breakpoints` and `maxDPR` defined in setup options. Examples include basic usage, setting aspect ratio, enabling eager loading, and optimizing with the `sizes` attribute for improved performance.

```html
<!-- Populate srcset and fallback with a list of squared variants -->
<TwicPicture src="your-lcp-image.jpg"></TwicPicture>
```

```html
<!-- Populate srcset and fallback with a list of 16/9 variants -->
<TwicPicture
  src="your-lcp-image.jpg"
  ratio="16/9"
></TwicPicture>
```

```html
<!-- eager disables lazy-loading and sets fetchpriority to high -->
<TwicPicture
  src="your-lcp-image.jpg"
  eager
></TwicPicture>
```

```html
<!-- for best performances set sizes attribute is a best practice -->
<TwicPicture
  src="your-lcp-image.jpg"
  eager
  sizes="
    (min-width: 1000px) 33vw,
    96vw
  "
></TwicPicture>
```

--------------------------------

### Complete TwicPics Setup in React 16+ Application

Source: https://github.com/twicpics/components/blob/main/src/_documentation/react.md

This comprehensive example illustrates the full integration of TwicPics Components into a React 16+ application's entry point (`index.jsx`), including all necessary imports, configuration, and the `ReactDOM.render` call.

```jsx
import React from "react";
import ReactDOM from "react-dom";
import Root from "./root.jsx";

// TwicPics Components importation
import { installTwicpics } from "@twicpics/components/react";
import "@twicpics/components/style.css";

// TwicPics Components configuration (see Setup Options)
installTwicpics( {
  // domain is mandatory
  "domain": "https://<your-domain>.twic.pics"
} );

ReactDOM.render(
  <React.StrictMode>
    <Root />
  </React.StrictMode>,
  document.getElementById( "root" )
);
```

--------------------------------

### Install and Configure Expo Package for React Native CLI Projects

Source: https://github.com/twicpics/components/blob/main/src/_documentation/react-native.md

Initial setup command for React Native CLI projects to install and configure the base `Expo` package, which is a prerequisite for installing other Expo modules like `expo-av` and `expo-image`.

```Bash
npx install-expo-modules@latest
```

--------------------------------

### TwicVideo Component HTML Usage Example

Source: https://github.com/twicpics/components/blob/main/documentation/svelteKit.md

An example demonstrating how to use the TwicVideo component in HTML, listing its common attributes for configuration.

```html
<TwicVideo
  src="<path>"
  anchor="<String>"
  aria-*="<String>"
  bot="<String>"
  crossorigin="<anonymous|use-credentials>"
  draggable="<boolean>"
  duration="<String|number>"
  eager="<boolean>"
  from="<String|number>"
  focus="<auto|coordinates>"
  id="<String>"
  intrinsic="<String>"
  mode="<contain|cover>"
  position="<css position>"
  posterFrom="<String|number>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  bind:state="<String>"
  on:statechange="<function>"
  role="<String>"
  step="<integer>"
  style="<Object|String>"
  tabindex="<integer>"
  title="<String>"
  to="<String|number>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
/>
```

--------------------------------

### Full Angular `app.component.ts` with TwicPics Configuration

Source: https://github.com/twicpics/components/blob/main/documentation/angular.md

Demonstrates a complete `app.component.ts` file configured with TwicPics Components. This example includes importing the necessary function, defining the component, and applying various TwicPics setup options like `domain`, `anticipation`, `breakpoints`, and `step`.

```TypeScript
//here is an example of a `Angular` app.component.ts configured with TwicPics.
import { Component } from '@angular/core'
import { installTwicPics } from '@twicpics/components/angular19'
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrl: ''./app.component.css',
})
export class AppComponent {}

// TwicPics Components configuration
installTwicPics({
  domain: 'https://<your-domain>.twic.pics',
  anticipation: 0.5,
  breakpoints: {
    sm: 576,
  }
  step: 100,
})
```

--------------------------------

### Full Nuxt.js Configuration Example with TwicPics

Source: https://github.com/twicpics/components/blob/main/documentation/nuxt2.md

This comprehensive JavaScript example illustrates a complete `nuxt.config.js` file, including `head` metadata, the TwicPics Nuxt2 module integration, and the `twicpics` configuration object with the domain.

```js
export default {
  head: {
    title: "TwicPics x Nuxt2",
  },
  modules: ["@twicpics/components/nuxt2"],
  twicpics: {
    "https://<your-domain>.twic.pics"
  },
};
```

--------------------------------

### TwicPics Component Transition Properties

Source: https://github.com/twicpics/components/blob/main/samples/_/_Sample.html

Examples demonstrating various transition-related properties such as duration, timing function, and delay for TwicPics components.

```Component Configuration
transitionDuration="3000ms"
```

```Component Configuration
transitionTimingFunction="linear" transitionDuration="3000ms"
```

```Component Configuration
transitionDelay="3000ms"
```

```Component Configuration
transitionDelay="3000ms" transitionDuration="3000ms"
```

--------------------------------

### TwicPics Video Component Properties

Source: https://github.com/twicpics/components/blob/main/samples/_/_Sample.html

Examples of configuring video components with aspect ratios, placeholders, and transformations.

```Component Configuration
ratio="16/9" placeholder="main"
```

```Component Configuration
ratio="4/3" placeholder="none"
```

```Component Configuration
ratio="1.25" flip="y"
```

--------------------------------

### Configure TwicPics Nuxt3 Module with advanced options

Source: https://github.com/twicpics/components/blob/main/documentation/nuxt3.md

This example illustrates a more comprehensive `nuxt.config.ts` setup for TwicPics, including optional properties like `anticipation` and `step` alongside the required `domain`. These settings allow fine-tuning of lazy-loading behavior and image variant generation.

```TypeScript
// here is an example of a `nuxt.config.ts` configured with TwicPics.
export default defineNuxtConfig( {
    "modules":[
        `@twicpics/components/nuxt3`
    ] ,
    "twicpics": {
        "domain": `https://<your-domain>.twic.pics`,
        "anticipation": 0.5,
        "step": 50,
    },
} );
```

--------------------------------

### TwicImg Component Basic Usage Example

Source: https://github.com/twicpics/components/blob/main/documentation/svelte3.md

Example demonstrating the basic structure and available attributes for the TwicImg component, a drop-in replacement for the HTML `<img>` tag, showcasing its extensive configuration options.

```html
<TwicImg
  src="<path>"
  alt="<String>"
  anchor="<String>"
  aria-*="<String>"
  bot="<String>"
  crossorigin="<anonymous|use-credentials>"
  decoding="<async|auto|sync>"
  draggable="<boolean>"
  eager="<boolean>"
  focus="<auto|coordinates>"
  id="<String>"
  intrinsic="<String>"
  mode="<contain|cover>"
  position="<css position>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  bind:state="<String>"
  on:statechange="<function>"
  referrerpolicy="<no-referrer|no-referrer-when-downgrade|origin|`origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url>"
  refit="<boolean|String>"
  role="<String>"
  step="<integer>"
  style="<Object|String>"
  tabindex="<integer>"
  title="<String>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  zoom="<number|String>"
/>
```

--------------------------------

### HTML Examples for TwicImg Refit Property

Source: https://github.com/twicpics/components/blob/main/src/_documentation/common/_refitFeature.md

These examples demonstrate various uses of the `refit` property with the `<TwicImg>` component. It shows default refitting, aligning the subject with an `anchor`, and applying single or dual-axis padding around the main subject(s).

```HTML
  <!-- default refit: centered object(s), no padding around -->
  <TwicImg src="image1.jpg" refit />

  <!-- main subject(s) will be left aligned -->
  <TwicImg src="image3.jpg" anchor="left" refit/>

  <!-- a 5% padding will be applied around main subject(s) -->
  <TwicImg src="image2.jpg" refit="5p" />

  <!-- a 5% padding will be applied vertically, a 10% padding will be applied horizontally -->
  <TwicImg src="image3.jpg" refit="5p,10p" />
```

--------------------------------

### Install TwicPics Components Package

Source: https://github.com/twicpics/components/blob/main/src/_documentation/common/_installation.md

Instructions to add the `@twicpics/components` package to a project using either Yarn or npm.

```bash
# Using yarn
yarn add @twicpics/components

# Or using npm
npm install @twicpics/components
```

--------------------------------

### TwicPics Translucency Mode Ratio Examples

Source: https://github.com/twicpics/components/blob/main/samples/_/_Sample.html

Illustrates setting different aspect ratios for components in 'cover' translucency mode.

```Component Configuration
ratio="16/9"
```

```Component Configuration
ratio="4/3"
```

```Component Configuration
ratio="1.25"
```

--------------------------------

### TwicImg Component Usage Example

Source: https://github.com/twicpics/components/blob/main/documentation/svelte5.md

An example demonstrating the basic structure and available attributes for the TwicImg component, a drop-in replacement for the standard HTML `img` tag.

```html
<TwicImg
  src="<path>"
  alt="<String>"
  anchor="<String>"
  aria-*="<String>"
  bot="<String>"
  crossorigin="<anonymous|use-credentials>"
  decoding="<async|auto|sync>"
  draggable="<boolean>"
  eager="<boolean>"
  focus="<auto|coordinates>"
  id="<String>"
  intrinsic="<String>"
  mode="<contain|cover>"
  position="<css position>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  bind:state="<String>"
  on:statechange="<function>"
  referrerpolicy="<no-referrer|no-referrer-when-downgrade|origin|`origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url>"
  refit="<boolean|String>"
  role="<String>"
  step="<integer>"
  style="<Object|String>"
  tabindex="<integer>"
  title="<String>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  zoom="<number|String>"
/>
```

--------------------------------

### TwicPicture Component Usage Example

Source: https://github.com/twicpics/components/blob/main/documentation/webComponents.md

An example of how to use the TwicPicture component in HTML, showcasing its various available attributes for image optimization and responsiveness.

```html
<TwicPicture
  src="<path>"
  aria-*="<String>"
  alt="<String>"
  anchor="<String>"
  crossorigin="<anonymous|use-credentials>"
  decoding="<async|auto|none|sync>"
  draggable="<boolean>"
  eager="<boolean>"
  fetchpriority="<high|low|auto>"
  focus="<auto|coordinates>"
  id="<String>"
  mode="<contain|cover>"
  position="<String>"
  preTransform="<String>"
  ratio="<ratio>"
  referrerpolicy="<no-referrer|no-referrer-when-downgrade|origin|`origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url>"
  refit="<boolean|String>"
  role="<String>"
  sizes="<String>"
  style="<Object|String>"
  tabindex="<integer>"
  title="<String>"
/>
```

--------------------------------

### TwicImg Component HTML Usage Example

Source: https://github.com/twicpics/components/blob/main/documentation/svelte4.md

Example HTML markup for integrating the TwicImg component, showcasing its various configurable attributes and their expected value formats.

```HTML
<TwicImg
  src="<path>"
  alt="<String>"
  anchor="<String>"
  aria-*="<String>"
  bot="<String>"
  crossorigin="<anonymous|use-credentials>"
  decoding="<async|auto|sync>"
  draggable="<boolean>"
  eager="<boolean>"
  focus="<auto|coordinates>"
  id="<String>"
  intrinsic="<String>"
  mode="<contain|cover>"
  position="<css position>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  bind:state="<String>"
  on:statechange="<function>"
  referrerpolicy="<no-referrer|no-referrer-when-downgrade|origin|`origin-when-cross-origin|same-origin|strict-origin|strict-origin-when-cross-origin|unsafe-url>"
  refit="<boolean|String>"
  role="<String>"
  step="<integer>"
  style="<Object|String>"
  tabindex="<integer>"
  title="<String>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  zoom="<number|String>"
/>
```

--------------------------------

### TwicPics Picture Ratio and Sizes Properties

Source: https://github.com/twicpics/components/blob/main/samples/_/_Sample.html

Examples of setting various aspect ratios for TwicPicture components, including default and specific numeric/fractional values.

```Component Configuration
ratio="default"
```

```Component Configuration
ratio="3/4"
```

```Component Configuration
ratio="4/3"
```

```Component Configuration
ratio="16/9"
```

--------------------------------

### Full Gatsby Config Example with TwicPics Plugin (JavaScript)

Source: https://github.com/twicpics/components/blob/main/documentation/gatsby.md

A complete `gatsby-config.js` file demonstrating the integration of the TwicPics Gatsby plugin. This example includes `siteMetadata` and the plugin's configuration with the `domain` option.

```js
module.exports = {
  "siteMetadata": {
    "title": "twicpics x gatsby",
    "siteUrl": "https://www.yourdomain.tld"
  },
  "plugins": [
      {
        "resolve": "@twicpics/components/gatsby",
        "options": {
          "twicpics": {
            "domain": "https://<your-domain>.twic.pics"
          }
        }
      }
  ]
};
```

--------------------------------

### Install TwicPics Components Package

Source: https://github.com/twicpics/components/blob/main/documentation/nuxt3.md

Add the `@twicpics/components` package to your project using either Yarn or npm to begin integrating TwicPics functionalities.

```bash
# Using yarn
yarn add @twicpics/components

# Or using npm
npm install @twicpics/components
```

--------------------------------

### Install TwicPics Components Package via Yarn or npm

Source: https://github.com/twicpics/components/blob/main/documentation/react.md

Provides command-line instructions for installing the `@twicpics/components` package into a project. Users can choose between Yarn or npm package managers to add the necessary dependency for integrating TwicPics components.

```Bash
# Using yarn
yarn add @twicpics/components

# Or using npm
npm install @twicpics/components
```

--------------------------------

### Serve TwicPics Sample Projects

Source: https://github.com/twicpics/components/blob/main/samples/README.md

Instructions to run individual sample projects. After navigating to the specific sample project's directory, execute this command to start the development server, typically accessible at http://localhost:3000.

```Shell
yarn serve
```

--------------------------------

### Configure TwicPics Components in Nuxt3 `nuxt.config.ts`

Source: https://github.com/twicpics/components/blob/main/src/_documentation/nuxt3.md

These examples illustrate how to configure TwicPics Components in your `nuxt.config.ts` file, including basic setup with the module and domain, and an extended example with additional options like `anticipation` and `step`.

```typescript
export default defineNuxtConfig( {
    "modules": [ 
        `@twicpics/components/nuxt3`
    ],
    "twicpics": {
        "domain": `https://<your-domain>.twic.pics`,
    },
} );
```

```typescript
// here is an example of a `nuxt.config.ts` configured with TwicPics.
export default defineNuxtConfig( {
    "modules":[
        `@twicpics/components/nuxt3`
    ] ,
    "twicpics": {
        "domain": `https://<your-domain>.twic.pics`,
        "anticipation": 0.5,
        "step": 50,
    },
} );
```

--------------------------------

### TwicPics Svelte3 Setup Options API Reference

Source: https://github.com/twicpics/components/blob/main/documentation/svelte3.md

Detailed API documentation for the `installTwicpics` function's configuration options, including type, default values, and descriptions for each parameter that controls lazy loading, breakpoints, environment, and more.

```APIDOC
Option | Description | Type | Default
:-|:-|:-|:-
`anticipation` | TwicPics will lazy-load images by default. To avoid too abrupt a transition with elements appearing into view and then images very obviously loading afterwards, TwicPics will "anticipate" lazy loading by a factor of the actual viewport. This behavior is controlled by this setting. | `Number` | `0.2`
`breakpoints`| Customizes breakpoints value for responsive behavior. | `object` | `{ xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 }`
`domain` | This is your very own [TwicPics domain](https://www.twicpics.com/docs/getting-started/why-twicpics#domains-and-paths?utm_source=github&utm_medium=organic&utm_campaign=components). Providing it is **mandatory**. | `String` | 
`env` | Can be `debug`, `offline` or `production`. When set to `debug`, a gray lightweight `svg` [placeholder](https://www.twicpics.com/docs/reference/placeholders?utm_source=github&utm_medium=organic&utm_campaign=components) that displays its intrinsic dimensions is displayed in place of all medias targeted by their `src` value. When set to `offline`, these medias are replaced by a simple placeholder that allows to visualise their display area. | `String` | "production"
`handleShadowDom` | Must be set to `true` when using TwicComponents within a shadow DOM. | `boolean` | `false`
`maxDPR` | TwicPics will take the "Device Pixel Ratio" (`DPR`) of the current device into consideration when determining the sizes of images to load. By default, it will not take a `DPR` greater than `2` into consideration. If the `DPR` of the device is higher than `2`, TwicPics will assume it to be `2`. Using `maxDPR`, you can lower this limit down to `1` or be more permissive (for instance by setting it to `3` or `4`). | `Number` | `2`
`path` | Path to prepend to all src attributes. For instance, if path is "some/folder" then a src attribute set to "image.jpg" will be expanded into "some/folder/image.jpg" | `String` | 
`step` | To avoid requesting too may variants of the same image, TwicPics will round the width of images to the closest multiple of step. The height will then be computed in order to respect the original aspect ratio. | `Integer` | `10`
```

--------------------------------

### Install TwicPics Components using Yarn

Source: https://github.com/twicpics/components/blob/main/documentation/svelte5.md

This command adds the @twicpics/components package to your project as a development dependency. It is recommended for setting up the TwicPics Components library in your development environment.

```bash
yarn add @twicpics/components -D
```

--------------------------------

### Basic TwicVideo Component Usage Example

Source: https://github.com/twicpics/components/blob/main/documentation/vue3.md

Illustrates the basic structure and available attributes for the TwicVideo component, a drop-in replacement for the standard HTML video tag, optimized for TwicPics.

```HTML
<TwicVideo
  src="<path>"
  anchor="<String>"
  aria-*="<String>"
  bot="<String>"
  crossorigin="<anonymous|use-credentials>"
  draggable="<boolean>"
  duration="<String|number>"
  eager="<boolean>"
  from="<String|number>"
  focus="<auto|coordinates>"
  id="<String>"
  intrinsic="<String>"
  mode="<contain|cover>"
  position="<css position>"
  posterFrom="<String|number>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  @stateChange="<function>"
  role="<String>"
  step="<integer>"
  style="<Object|String>"
  tabindex="<integer>"
  title="<String>"
  to="<String|number>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
/>
```

--------------------------------

### Full Svelte 5 App Startup Configuration with TwicPics

Source: https://github.com/twicpics/components/blob/main/documentation/svelte5.md

Provides a complete example of a `main.js` file for a Svelte 5 application, demonstrating how to import, configure, and mount TwicPics Components during the app startup process.

```JavaScript
// Here is an example of a `Svelte5` app startup configured with TwicPics.
import { installTwicpics } from "@twicpics/components/svelte5";
import "@twicpics/components/style.css";

import App from "./App.svelte";
import { mount } from 'svelte';

installTwicpics({
  "domain": `https://<your-domain>.twic.pics`
});

const app = mount( Sample, {
  "target": document.body,
} );

export default app;
```

--------------------------------

### Install and Configure TwicPics Components in Svelte4

Source: https://github.com/twicpics/components/blob/main/src/_documentation/svelte4.md

This snippet demonstrates how to import the `installTwicpics` function and the necessary CSS, then configure the mandatory `domain` for TwicPics within a Svelte4 project's setup.

```JavaScript
// import TwicPics Svelte4 components
import { installTwicpics } from "@twicpics/components/svelte4";
// import TwicPics components css
import "@twicpics/components/style.css";

installTwicpics( {
  // domain is mandatory
  "domain": "https://<your-domain>.twic.pics"
} );
```

--------------------------------

### Svelte 4 App Startup Configuration with TwicPics

Source: https://github.com/twicpics/components/blob/main/documentation/svelte4.md

This example illustrates a complete `main.js` file for a Svelte 4 application, demonstrating how to integrate TwicPics Components during the app's startup phase. It includes importing necessary components and CSS, and initializing TwicPics with your mandatory domain.

```JavaScript
// Here is an example of a `Svelte4` app startup configured with TwicPics.
import { installTwicpics } from "@twicpics/components/svelte4";
import "@twicpics/components/style.css";

import App from "./App.svelte";

installTwicpics({
  "domain": `https://<your-domain>.twic.pics`
});

const app = new App({
  target: document.body
});

export default app;
```

--------------------------------

### Svelte5 App Startup with TwicPics Configuration

Source: https://github.com/twicpics/components/blob/main/src/_documentation/svelte5.md

Demonstrates a complete `main.js` file for a Svelte5 application, showing how to import TwicPics components and styles, configure them with your domain, and then mount the main Svelte `App` component to the DOM.

```JavaScript
// Here is an example of a `Svelte5` app startup configured with TwicPics.
import { installTwicpics } from "@twicpics/components/svelte5";
import "@twicpics/components/style.css";

import App from "./App.svelte";
import { mount } from 'svelte';

installTwicpics({
  "domain": `https://<your-domain>.twic.pics`
});

const app = mount( Sample, {
  "target": document.body,
} );

export default app;
```

--------------------------------

### Complete Vue3 App Startup with TwicPics Configuration

Source: https://github.com/twicpics/components/blob/main/src/_documentation/vue3.md

An example of a `main.js` file showing a complete Vue3 application startup, including the import, configuration, and mounting of the TwicPics Vue3 plugin.

```js
// Here is an example of a `Vue3` app startup configured with TwicPics.
import App from "./App.vue";
import { createApp } from "vue";

// import TwicPics Vue3 Plugin
import TwicPics from "@twicpics/components/vue3";
import "@twicpics/components/style.css";

// create application instance
const app = createApp(App);

// configure TwicPics Vue3 Plugin
app.use(TwicPics, {
  domain: "https://<your-domain>.twic.pics"
});

app.mount("#app");
```

--------------------------------

### TwicPics Components Setup Options Reference

Source: https://github.com/twicpics/components/blob/main/documentation/webComponents.md

This section details the available configuration options for `installTwicpics`. Each option controls a specific aspect of TwicPics' behavior, such as lazy loading anticipation, responsive breakpoints, and debug modes.

```APIDOC
anticipation:
  Description: TwicPics will lazy-load images by default. To avoid too abrupt a transition with elements appearing into view and then images very obviously loading afterwards, TwicPics will "anticipate" lazy loading by a factor of the actual viewport. This behavior is controlled by this setting.
  Type: Number
  Default: 0.2
breakpoints:
  Description: Customizes breakpoints value for responsive behavior.
  Type: object
  Default: { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 }
domain:
  Description: This is your very own TwicPics domain. Providing it is mandatory.
  Type: String
  Default: (None)
env:
  Description: Can be debug, offline or production. When set to debug, a gray lightweight svg placeholder that displays its intrinsic dimensions is displayed in place of all medias targeted by their src value. When set to offline, these medias are replaced by a simple placeholder that allows to visualise their display area.
  Type: String
  Default: "production"
handleShadowDom:
  Description: Must be set to true when using TwicComponents within a shadow DOM.
  Type: boolean
  Default: false
maxDPR:
  Description: TwicPics will take the "Device Pixel Ratio" (DPR) of the current device into consideration when determining the sizes of images to load. By default, it will not take a DPR greater than 2 into consideration. If the DPR of the device is higher than 2, TwicPics will assume it to be 2. Using maxDPR, you can lower this limit down to 1 or be more permissive (for instance by setting it to 3 or 4).
  Type: Number
  Default: 2
path:
  Description: Path to prepend to all src attributes. For instance, if path is "some/folder" then a src attribute set to "image.jpg" will be expanded into "some/folder/image.jpg"
  Type: String
  Default: (None)
step:
  Description: To avoid requesting too may variants of the same image, TwicPics will round the width of images to the closest multiple of step. The height will then be computed in order to respect the original aspect ratio.
  Type: Integer
  Default: 10
```

--------------------------------

### TwicPics `installTwicpics` Setup Options API Reference

Source: https://github.com/twicpics/components/blob/main/documentation/react.md

Details the configuration options available for the `installTwicpics` function, including their types, default values, and descriptions, allowing fine-grained control over TwicPics behavior.

```APIDOC
Option: anticipation
  Description: TwicPics will lazy-load images by default. To avoid too abrupt a transition with elements appearing into view and then images very obviously loading afterwards, TwicPics will "anticipate" lazy loading by a factor of the actual viewport. This behavior is controlled by this setting.
  Type: Number
  Default: 0.2

Option: breakpoints
  Description: Customizes breakpoints value for responsive behavior.
  Type: object
  Default: { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 }

Option: domain
  Description: This is your very own TwicPics domain. Providing it is mandatory.
  Type: String
  Default: (None)

Option: env
  Description: Can be debug, offline or production. When set to debug, a gray lightweight svg placeholder that displays its intrinsic dimensions is displayed in place of all medias targeted by their src value. When set to offline, these medias are replaced by a simple placeholder that allows to visualise their display area.
  Type: String
  Default: "production"

Option: handleShadowDom
  Description: Must be set to true when using TwicComponents within a shadow DOM.
  Type: boolean
  Default: false

Option: maxDPR
  Description: TwicPics will take the "Device Pixel Ratio" (DPR) of the current device into consideration when determining the sizes of images to load. By default, it will not take a DPR greater than 2 into consideration. If the DPR of the device is higher than 2, TwicPics will assume it to be 2. Using maxDPR, you can lower this limit down to 1 or be more permissive (for instance by setting it to 3 or 4).
  Type: Number
  Default: 2

Option: path
  Description: Path to prepend to all src attributes. For instance, if path is "some/folder" then a src attribute set to "image.jpg" will be expanded into "some/folder/image.jpg"
  Type: String
  Default: (None)

Option: step
  Description: To avoid requesting too may variants of the same image, TwicPics will round the width of images to the closest multiple of step. The height will then be computed in order to respect the original aspect ratio.
  Type: Integer
  Default: 10
```

--------------------------------

### Complete Vue3 `main.js` Configuration with TwicPics

Source: https://github.com/twicpics/components/blob/main/documentation/vue3.md

This comprehensive example illustrates a typical Vue3 application startup file (`main.js`) fully configured with the TwicPics Vue3 plugin, including imports, app creation, plugin registration, and mounting the application.

```js
// Here is an example of a `Vue3` app startup configured with TwicPics.
import App from "./App.vue";
import { createApp } from "vue";

// import TwicPics Vue3 Plugin
import TwicPics from "@twicpics/components/vue3";
import "@twicpics/components/style.css";

// create application instance
const app = createApp(App);

// configure TwicPics Vue3 Plugin
app.use(TwicPics, {
  domain: "https://<your-domain>.twic.pics"
});

app.mount("#app");
```

--------------------------------

### TwicPics Svelte 5 `installTwicpics` Setup Options

Source: https://github.com/twicpics/components/blob/main/documentation/svelte5.md

Defines the configuration options available for the `installTwicpics` function, controlling various aspects of TwicPics behavior such as lazy loading anticipation, breakpoints, domain, environment, shadow DOM handling, device pixel ratio, path prefixing, and image stepping.

```APIDOC
Option: anticipation
  Description: TwicPics will lazy-load images by default. To avoid too abrupt a transition with elements appearing into view and then images very obviously loading afterwards, TwicPics will "anticipate" lazy loading by a factor of the actual viewport. This behavior is controlled by this setting.
  Type: Number
  Default: 0.2

Option: breakpoints
  Description: Customizes breakpoints value for responsive behavior.
  Type: object
  Default: { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 }

Option: domain
  Description: This is your very own TwicPics domain. Providing it is **mandatory**.
  Type: String
  Default: (mandatory)

Option: env
  Description: Can be `debug`, `offline` or `production`. When set to `debug`, a gray lightweight `svg` placeholder that displays its intrinsic dimensions is displayed in place of all medias targeted by their `src` value. When set to `offline`, these medias are replaced by a simple placeholder that allows to visualise their display area.
  Type: String
  Default: "production"

Option: handleShadowDom
  Description: Must be set to `true` when using TwicComponents within a shadow DOM.
  Type: boolean
  Default: false

Option: maxDPR
  Description: TwicPics will take the "Device Pixel Ratio" (`DPR`) of the current device into consideration when determining the sizes of images to load. By default, it will not take a `DPR` greater than `2` into consideration. If the `DPR` of the device is higher than `2`, TwicPics will assume it to be `2`. Using `maxDPR`, you can lower this limit down to `1` or be more permissive (for instance by setting it to `3` or `4`).
  Type: Number
  Default: 2

Option: path
  Description: Path to prepend to all src attributes. For instance, if path is "some/folder" then a src attribute set to "image.jpg" will be expanded into "some/folder/image.jpg"
  Type: String
  Default: (optional)

Option: step
  Description: To avoid requesting too may variants of the same image, TwicPics will round the width of images to the closest multiple of step. The height will then be computed in order to respect the original aspect ratio.
  Type: Integer
  Default: 10
```

--------------------------------

### Configure TwicPics Components in SvelteKit Layout

Source: https://github.com/twicpics/components/blob/main/src/_documentation/svelteKit.md

This snippet demonstrates how to import the `installTwicpics` function and the core CSS styles. It then shows how to initialize TwicPics by calling `installTwicpics` with your domain, typically placed in the main SvelteKit layout file.

```js
  // import TwicPics sveltekit components
  import { installTwicpics } from "@twicpics/components/sveltekit";
  // import TwicPics components css
  import "@twicpics/components/style.css";
```

```js
  installTwicpics( {
    // domain is mandatory
    "domain": "https://<your-domain>.twic.pics"
  } );
```

--------------------------------

### TwicPics Background Cover Mode Ratio Examples

Source: https://github.com/twicpics/components/blob/main/samples/_/_Sample.html

Examples of various aspect ratios when using TwicBackground component in 'cover' mode.

```Component Configuration
ratio="16/9"
```

```Component Configuration
ratio="4/3"
```

```Component Configuration
ratio="1.25"
```

```Component Configuration
ratio="1:1"
```

```Component Configuration
ratio="16:9"
```

```Component Configuration
ratio="4:3"
```

```Component Configuration
ratio="5:4"
```

--------------------------------

### TwicPics Components SvelteKit `installTwicpics` Configuration Options

Source: https://github.com/twicpics/components/blob/main/documentation/svelteKit.md

Detailed reference for all available options that can be passed to the `installTwicpics` function, including their data types, default values, and a description of their impact on TwicPics behavior within your SvelteKit application.

```APIDOC
installTwicpics(options: object)
  options:
    anticipation: Number (Default: 0.2)
      Description: Controls lazy-loading anticipation factor to avoid abrupt transitions with elements appearing into view.
    breakpoints: object (Default: { xs: 320, sm: 640, md: 768, lg: 1024, xl: 1280, '2xl': 1536 })
      Description: Customizes breakpoint values for responsive image behavior.
    domain: String (Mandatory)
      Description: Your unique TwicPics domain, which is a mandatory parameter.
    env: String (Default: "production")
      Description: Sets the environment mode (debug, offline, or production) affecting placeholder display for targeted media.
    handleShadowDom: boolean (Default: false)
      Description: Must be set to true when using TwicComponents within a shadow DOM environment.
    maxDPR: Number (Default: 2)
      Description: Sets the maximum Device Pixel Ratio TwicPics considers for image sizing, overriding device DPR if higher.
    path: String (Default: "")
      Description: A path to prepend to all src attributes, expanding relative image paths.
    step: Integer (Default: 10)
      Description: Rounds image widths to the closest multiple of this value to optimize the number of image variants requested.
```

--------------------------------

### Install TwicPics Components Package

Source: https://github.com/twicpics/components/blob/main/src/_documentation/common/_installationDevDependencies.md

Adds the @twicpics/components package as a development dependency to your project using either yarn or npm.

```bash
# Using yarn
yarn add @twicpics/components -D

# Or using npm
npm install @twicpics/components --D
```

--------------------------------

### Install TwicPics Components

Source: https://github.com/twicpics/components/blob/main/README.md

This snippet shows how to install the TwicPics Components library using either Yarn or NPM package managers.

```sh
# with yarn
yarn add @twicpics/components

# or with NPM
npm install @twicpics/components
```

--------------------------------

### Build TwicPics Components

Source: https://github.com/twicpics/components/blob/main/samples/README.md

Instructions to build the TwicPics components package from the root of the repository. This step is required before running any sample projects.

```Shell
yarn build
```

--------------------------------

### Importing and Initializing TwicPics Components in SvelteKit

Source: https://github.com/twicpics/components/blob/main/documentation/svelteKit.md

This snippet demonstrates the essential JavaScript code for importing the TwicPics SvelteKit package and its associated CSS, followed by the mandatory initialization call to `installTwicpics` with your unique TwicPics domain.

```js
  // import TwicPics sveltekit components
  import { installTwicpics } from "@twicpics/components/sveltekit";
  // import TwicPics components css
  import "@twicpics/components/style.css";

  installTwicpics( {
    // domain is mandatory
    "domain": "https://<your-domain>.twic.pics"
  } );
```