@gfazioli/mantine-flip 2.5.7 → 2.5.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CODE_OF_CONDUCT.md +1 -1
- package/README.md +33 -17
- package/package.json +1 -1
package/CODE_OF_CONDUCT.md
CHANGED
|
@@ -60,7 +60,7 @@ representative at an online or offline event.
|
|
|
60
60
|
|
|
61
61
|
Instances of abusive, harassing, or otherwise unacceptable behavior may be
|
|
62
62
|
reported to the community leaders responsible for enforcement at
|
|
63
|
-
|
|
63
|
+
giovambattista.fazioli@gmail.com.
|
|
64
64
|
All complaints will be reviewed and investigated promptly and fairly.
|
|
65
65
|
|
|
66
66
|
All community leaders are obligated to respect the privacy and security of the
|
package/README.md
CHANGED
|
@@ -9,28 +9,21 @@
|
|
|
9
9
|
[](https://www.npmjs.com/package/@gfazioli/mantine-flip)
|
|
10
10
|
|
|
11
11
|
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)
|
|
15
|
+
|
|
12
16
|
</div>
|
|
13
17
|
|
|
14
18
|
## Overview
|
|
15
19
|
|
|
16
20
|
This component is created on top of the [Mantine](https://mantine.dev/) library.
|
|
17
21
|
|
|
18
|
-
[
|
|
19
|
-
)](https://mantine.dev/)
|
|
20
|
-
|
|
21
|
-
It allows for easy management of two separate views, such as in the cases of a registration form and a login form.
|
|
22
|
-
Essentially, when switching between views, the component will handle the flip animation.
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
[](https://youtu.be/RzRUb3IDcDw)
|
|
27
|
-
[](https://gfazioli.github.io/mantine-flip/)
|
|
29
|
-
[](https://mantine-extensions.vercel.app/)
|
|
31
|
-
|
|
32
|
-
👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.
|
|
22
|
+
[Mantine Flip](https://gfazioli.github.io/mantine-flip/) is a two-face container that animates between a front and a back view, ideal for compact UIs that need progressive disclosure (e.g., editing panels, settings, sign-in/sign-up toggles, or profile details). It supports both uncontrolled usage with Flip.Target to wire any element as a click trigger, and controlled usage via flipped/defaultFlipped using React state for full synchronization with your app logic. The component enforces exactly two children, accepts size constraints (w/h), and offers transition customization such as vertical flipping and distinct rotation directions for flip-in and flip-out. Styling hooks (classNames/Styles API) let you target inner parts for design refinement, while examples demonstrate practical patterns like credit-card editing, modal-like settings panes, and multi-target triggers within a single face.
|
|
33
23
|
|
|
24
|
+
> [!note]
|
|
25
|
+
>
|
|
26
|
+
> → [Demo and Documentation](https://gfazioli.github.io/mantine-flip/) → [Youtube Video](https://www.youtube.com/playlist?list=PL85tTROKkZrWyqCcmNCdWajpx05-cTal4) → [More Mantine Components](https://mantine-extensions.vercel.app/)
|
|
34
27
|
|
|
35
28
|
## Installation
|
|
36
29
|
|
|
@@ -80,10 +73,33 @@ function Demo() {
|
|
|
80
73
|
As you can see, the `Flip` component wraps two children, which are the two views that you want to flip between.
|
|
81
74
|
The `Flip.Target` component is used to define the trigger for the flip animation. It can be any component, such as a button, or a link, or even a div.
|
|
82
75
|
|
|
76
|
+
## Sponsor
|
|
77
|
+
|
|
83
78
|
<div align="center">
|
|
84
|
-
|
|
85
|
-
[
|
|
79
|
+
|
|
80
|
+
[<kbd> <br/> ❤️ If this component has been useful to you or your team, please consider becoming a sponsor <br/> </kbd>](https://github.com/sponsors/gfazioli?o=esc)
|
|
86
81
|
|
|
87
82
|
</div>
|
|
88
83
|
|
|
84
|
+
Your support helps me:
|
|
85
|
+
|
|
86
|
+
- Keep the project actively maintained with timely bug fixes and security updates
|
|
87
|
+
- Add new features, improve performance, and refine the developer experience
|
|
88
|
+
- Expand test coverage and documentation for smoother adoption
|
|
89
|
+
- Ensure long‑term sustainability without relying on ad hoc free time
|
|
90
|
+
- Prioritize community requests and roadmap items that matter most
|
|
91
|
+
|
|
92
|
+
Open source thrives when those who benefit can give back—even a small monthly contribution makes a real difference. Sponsorships help cover maintenance time, infrastructure, and the countless invisible tasks that keep a project healthy.
|
|
93
|
+
|
|
94
|
+
Your help truly matters.
|
|
95
|
+
|
|
96
|
+
💚 [Become a sponsor](https://github.com/sponsors/gfazioli?o=esc) today and help me keep this project reliable, up‑to‑date, and growing for everyone.
|
|
97
|
+
|
|
98
|
+
---
|
|
99
|
+
|
|
89
100
|
https://github.com/user-attachments/assets/cc968450-9d8c-4b16-be58-a6766597742e
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
[](https://www.star-history.com/#gfazioli/mantine-flip&Timeline)
|
|
105
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-flip",
|
|
3
|
-
"version": "2.5.
|
|
3
|
+
"version": "2.5.8",
|
|
4
4
|
"description": "Flip component is a wrapper for any component that can be flipped. It is used to create cards, flip boxes and more.",
|
|
5
5
|
"homepage": "https://gfazioli.github.io/mantine-flip/",
|
|
6
6
|
"packageManager": "yarn@4.0.1",
|