React

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

// import TwicPics 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 `React 16+` app startup configured with TwicPics.
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')
)

// Here is an example of a `React 18+` app startup configured with TwicPics.
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 />)

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

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

// component.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>

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

// 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" />

  <!-- 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" />

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

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

<!-- component.jsx -->
<TwicImg className="style-driven" src="path/to/your/image"></TwicImg>

/* You are responsible for properly sizing the component. */
.hero-image {
  height: 500px;
}

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

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

<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>"
  refit="<boolean|String>"
  step="<integer>"
  title="<String>"
  transition="<fade|zoom|none>"
  transitionDelay="<String>"
  transitionDuration="<String>"
  transitionTimingFunction="<String>"
  zoom="<String | Number>"
/>