NextJs

npm install @twicpics/components

yarn add @twicpics/components

// import TwicPics react components (next.js uses react components)
import { installTwicPics } from '@twicpics/components/react'
// import TwicPics components css
import '@twicpics/components/style.css'

installTwicPics({
  // domain is mandatory
  domain: 'https://<your-domain>.twic.pics',
})

// here is an example of a `Next.js` app startup configured with TwicPics.

// 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',
})

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

// this component will be used in place of an img element.
// nb : next.js uses react components
import { TwicImg } from '@twicpics/components/react'

// this component will be used in place of an video element.
// nb : next.js uses react components
import { TwicVideo } from '@twicpics/components/react'

import React from 'react'

import { TwicImg } from '@twicpics/components/react'

const YourTemplate = () => <TwicImg src="path/to/your/image" />

export default YourTemplate

.landscape {
  --twic-ratio: calc(4 / 3);
}

.portrait {
  --twic-ratio: calc(3 / 4);
}

.square {
  --twic-ratio: calc(1);
}

.contain {
  --twic-mode: contain;
}

.cover {
  --twic-mode: cover;
}

.left {
  --twic-position: left;
}

.right {
  --twic-position: right;
}

.lg {
  width: 300px;
}

.md {
  width: 150px;
}

.sm {
  width: 100px;
}

<div className="landscape">
  <TwicImg src=path/to/your/image></TwicImg>
</div>
<div className="square">
  <TwicImg src=path/to/your/image></TwicImg>
</div>
<div className="portrait">
  <TwicImg src=path/to/your/image></TwicImg>
</div>
<div className="contain left">
  <TwicImg src=path/to/your/image ratio="16/9"></TwicImg>
</div>
<div className="contain right">
  <TwicImg src=path/to/your/image ratio="16/9"></TwicImg>
</div>
<!---
    Attributes take precedence over CSS.
    In the next example, ratio will 16/9 AND NOT 1 as defined in square css class
--->
<div className="cover square">
  <TwicImg src=path/to/your/image ratio="16/9"></TwicImg>
</div>

.style-driven {
  --twic-ratio: 1.9;
}

@media (min-width: 640px) {
  .style-driven {
    --twic-mode: contain;
  }
}

@media (min-width: 768px) {
  .style-driven {
    --twic-mode: cover;
    --twic-ratio: calc(4 / 3);
  }
}

@media (min-width: 1024px) {
  .style-driven {
    --twic-ratio: calc(16 / 9);
  }
}

@media (min-width: 1280px) {
  .style-driven {
    --twic-ratio: calc(21 / 9);
  }
}

@media (min-width: 1536px) {
  .style-driven {
    --twic-ratio: calc(36 / 9);
  }
}

<TwicImg className="style-driven" src="path/to/your/image"></TwicImg>

.hero-image {
  height: 500px;
}

@media (min-width: 1024px) {
  .hero-image {
    height: 300px;
    width: 100%;
  }
}

<TwicImg src="path/to/your/image" className="hero-image" ratio="none"></TwicImg>

<TwicImg
  src="<path>"
  (mandatory)
  alt="<string>"
  ratio="<ratio>"
  mode="<contain|cover>"
  focus="<auto|coordinates>"
  position="<css position>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<string>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  step="<integer>"
/>

<TwicVideo
  src="<path>"
  (mandatory)
  ratio="<ratio>"
  mode="<contain|cover>"
  focus="<auto|coordinates>"
  position="<css position>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<string>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  step="<integer>"
/>

<selector > {
  --twic-ratio: <ratio>;
  --twic-mode: <contain|cover>;
  --twic-position: <css position>;
  --twic-transition-delay: <string>;
  --twic-transition-duration: <string>;
  --twic-transition-timing-function: <string>;
}