Mantine Reflection

Undolog

@gfazioli/mantine-reflection

A Mantine component that adds a reflection effect to its children.

Version
v0.1.10
Source
View source code
Package
@gfazioli/mantine-reflection
See More
Mantine Extensions
Docs
Edit this page
Built by
Giovambattista Fazioli (@gfazioli)
License
MIT

Installation

yarn add @gfazioli/mantine-reflection

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

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

You can import styles within a layer @layer mantine-reflection by importing @gfazioli/mantine-reflection/styles.layer.css file.

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

Usage

The Reflection component simply wraps the content to be reflected.

test
test
Reflection distance
Reflection opacity
Reflection blur
Reflection start
Reflection end
Reflection stretch
Shadow offset
Shadow opacity
Shadow blur
Shadow size
Shadow scale x
Shadow scale y
Shadow color
import { Reflection } from '@gfazioli/mantine-reflection'';

function Demo() {
  return (
    <Reflection>
      <img
        width={150}
        style={{ display: 'block', borderRadius: '50%' }}
        alt="test"
        src="https://picsum.photos/150/150"
      />
    </Reflection>
  );
}

Reflection Blur: The Reflection component has a reflectionBlur prop that can be used to add a blur effect to the reflection. The value is a number that represents the amount of blur in pixels. The default value is 0. You will probably notice that in the image above, as the blur effect on the reflection increases, the edges of the image will be cut off. To avoid this problem, you can adjust the blur effect with low values or apply padding to the component/image to be reflected.

The Image tag

The img tag requires to be in display: block in order to avoid padding below it. For this reason, a style has been added to force the behavior.

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

function Demo() {
  return (
    <Group mt="5%" gap={100} justify="center">
      <Reflection>
        <img
          width={150}
          style={{ display: 'block' }}
          alt="test"
          src="https://picsum.photos/150/150"
        />
      </Reflection>

      <Reflection {...props}>
        <img width={150} alt="test" src="https://picsum.photos/150/150" />
      </Reflection>
    </Group>
  );
}

Components

You may use the Reflection component to reflect other components.

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

function Demo() {
  return (
    <Reflection>
      <Button>Hello World!</Button>
  </Reflection>
  );
}

Complex components

For complex components, you may need to disable certain components to prevent the mirrored version from functioning as a copy. In this example, we used the prop disableChildren for the right component. Mouse click is always disabled via CSS, but moving with the TAB key will focus on the mirrored component.

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

function Demo() {
  <Group mt="5%" gap={120} justify="center">
    <Reflection>
      <Paper withBorder w={230} p={16}>
        <Stack>
          <img
            style={{
              borderRadius: '8px',
            }}
            alt="test"
            src="https://source.unsplash.com/k5brbv8T3yE/150x150"
          />
          <Input placeholder="Click and press TAB 2 times" />
          <Button>Cancel</Button>
        </Stack>
      </Paper>
    </Reflection>
    <Reflection disableChildren>
      <Paper withBorder w={230} p={16}>
        <Stack>
          <img
            style={{
              borderRadius: '8px',
            }}
            alt="test"
            src="https://source.unsplash.com/k5brbv8T3yE/150x150"
          />
          <Input placeholder="Your name" />
          <Button>Cancel</Button>
        </Stack>
      </Paper>
    </Reflection>
  </Group>
  );
}