Next.js

# Using yarn
yarn add @twicpics/components
# Or using npm
npm install @twicpics/components

// _app.js

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

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

export default function MyApp({ Component, pageProps }) {
  return (
    // your app code
  )
}

// MyComponent.jsx

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

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

export default YourTemplate

<TwicView>
  <TwicImg src="image1.jpg" />
  <TwicImg src="image2.jpg" />
  <TwicImg src="image3.jpg" />
</TwicView>

.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" />
</div>
<div className="square">
  <TwicImg src="path/to/your/image" />
</div>
<div className="portrait">
  <TwicImg src="path/to/your/image" />
</div>
<div className="contain left">
  <TwicImg src="path/to/your/image" ratio="16/9" />
</div>
<div className="contain right">
  <TwicImg src="path/to/your/image" ratio="16/9" />
</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" />
</div>

/* styles.css */

.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);
  }
}

// MyComponent.jsx

import 'style.css'

export default function () {
  return <TwicImg className="style-driven" src="path/to/your/image" />
}

/* style.css */

.hero-image {
  height: 500px;
}

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

// MyComponent.jsx

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

// component.jsx
const [state, setState] = useState(undefined)

const handleStateChange = (stateEvent) => {
  // Implement the logic here
  const { state } = stateEvent
  console.log(`TwicComponent emits a new state`, state)
  setState(state)
}

return <TwicImg onStateChange={handleStateChange} src="path/to/your/image" />

<TwicImg src="image1.jpg" zoom="2" /> <TwicImg src="image2.jpg" zoom="2.5" />

<TwicImg src="image3.jpg" zoom="css" className=".zoom-3" />

.zoom-3 {
  --twic-zoom: 3;
}

<TwicImg
  src="<path>"
  alt="<String>"
  anchor="<String>"
  bot="<String>"
  eager="<boolean>"
  focus="<auto|coordinates>"
  intrinsic="<String>"
  mode="<contain|cover>"
  onStateChange="<function>"
  position="<css position>"
  placeholder="<preview|maincolor|meancolor|none>"
  preTransform="<String>"
  ratio="<ratio>"
  step="<integer>"
  title="<String>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  zoom="<String | Number>"
/>