slick image compare react

Docs

Read the documentation >>

tl;dr

install the package

pnpm add slick-image-compare-react

use it in your code

import React from 'react';
import SlickImageCompare from 'slick-image-compare-react';
import 'slick-image-compare/style';

function App() {
  const options = {
    beforeImage: '01_before.png',
    afterImage: '01_before.png',
  };

  return (
    <>
      {/* 1) use with the defined option object */}
      <SlickImageCompare options={options} />

      {/* 2) use with img child nodes and default settings */}
      <SlickImageCompare>
        <img
          src='01_before.png'
          alt='before'
        />
        <img
          src='01_after.png'
          alt='after'
        />
      </SlickImageCompare>
    </>
  );
}

export default App;