https://github.com/gfazioli/mantine-reflection

A Mantine React component for creating breathtaking reflection effects
https://github.com/gfazioli/mantine-reflection

component effects mantine-v7 ractjs reflection typescript

Last synced: about 1 month ago
JSON representation

A Mantine React component for creating breathtaking reflection effects

• Host: GitHub
• URL: https://github.com/gfazioli/mantine-reflection
• Owner: gfazioli
• License: mit
• Created: 2024-02-13T06:44:15.000Z (9 months ago)
• Default Branch: master
• Last Pushed: 2024-10-05T09:52:03.000Z (about 2 months ago)
• Last Synced: 2024-10-09T05:18:45.763Z (about 1 month ago)
• Topics: component, effects, mantine-v7, ractjs, reflection, typescript
• Language: TypeScript
• Homepage: https://gfazioli.github.io/mantine-reflection/
• Size: 9.26 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# Mantine Reflection Component







---



  

    

  

  

  

    

  

  

    

  









## Overview

This component is created on top of the [Mantine](https://mantine.dev/) 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](https://mantine-extensions.vercel.app/) library.

## Installation

```sh

npm install @gfazioli/mantine-reflection

```

or 

```sh

yarn add @gfazioli/mantine-reflection

```

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

```tsx

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

```

## Usage

```tsx

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

function Demo() {

  return (

    

      

    

  );

}

```

## 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                         |