@gfazioli/mantine-reflection NPM

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

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

Props

Name	Type	Description
children	React.ReactNode	Children to reflect
disableChildren	boolean	Disable the children
reflectionBlur	number	The blur of the reflection
reflectionDistance	number \| MantineSize \| (string & {})	The distance of the reflection from the original element
reflectionEnd	number	The end of the reflection (gradient)
reflectionOpacity	number	The opacity of the reflection
reflectionStart	number	The start of the reflection (gradient)
reflectionStretch	number	The stretch of the reflection. May you should adjust the reflectionDistance
shadow	boolean	Shadow props
shadowBlur	number	The blur of the shadow
shadowColor	string	The color of the shadow
shadowOffset	number	The offset of the shadow
shadowOpacity	number	The opacity of the shadow
shadowScaleX	number	The scale of the shadow in the x-axis
shadowScaleY	number	The scale of the shadow in the y-axis
shadowSize	number \| MantineSize \| (string & {})	The size of the shadow