Mantine Reflection Component

Overview

This component is created on top of the Mantine library.

Adds a reflection effect to a component. It simply wraps the content to be reflected.

👉 You can find more components on the Mantine Extensions Hub library.

Installation

npm install @gfazioli/mantine-reflection

or

yarn add @gfazioli/mantine-reflection

After installation import package styles at the root of your application:

import '@gfazioli/mantine-reflection/styles.css';

Usage

import { Reflection } from '@gfazioli/mantine-reflection';

function Demo() {
  return (
    <Reflection>
      <img
        width={150}
        style={{ display: 'block', borderRadius: '50%' }}
        alt="test"
        src="https://source.unsplash.com/9QmbsTDAI4g/150x150"
      />
    </Reflection>
  );
}