@gfazioli/mantine-flip 1.1.2 → 1.1.4
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/README.md
CHANGED
|
@@ -20,11 +20,23 @@
|
|
|
20
20
|
## Overview
|
|
21
21
|
|
|
22
22
|
This component is created on top of the [Mantine](https://mantine.dev/) library.
|
|
23
|
+
|
|
24
|
+
[](https://mantine.dev/)
|
|
26
|
+
|
|
23
27
|
It allows for easy management of two separate views, such as in the cases of a registration form and a login form.
|
|
24
28
|
Essentially, when switching between views, the component will handle the flip animation.
|
|
25
|
-
You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.
|
|
26
29
|
|
|
27
|
-
|
|
30
|
+
|
|
31
|
+
[](https://youtu.be/RzRUb3IDcDw)
|
|
33
|
+
[](https://gfazioli.github.io/mantine-flip/)
|
|
35
|
+
[](https://gfazioli.github.io/mantine-onboarding-tour/)
|
|
37
|
+
|
|
38
|
+
👉 You can find more components on the [Mantine Extensions Hub](https://mantine-extensions.vercel.app/) library.
|
|
39
|
+
|
|
28
40
|
|
|
29
41
|
## Installation
|
|
30
42
|
|
|
@@ -9,7 +9,7 @@ const defaultProps = {
|
|
|
9
9
|
refProp: "ref"
|
|
10
10
|
};
|
|
11
11
|
const FlipTarget = React.forwardRef((props, ref) => {
|
|
12
|
-
const { children, refProp, ...others } = core.useProps("
|
|
12
|
+
const { children, refProp, ...others } = core.useProps("FlipTarget", defaultProps, props);
|
|
13
13
|
if (!core.isElement(children)) {
|
|
14
14
|
throw new Error(
|
|
15
15
|
"Flip.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlipTarget.cjs","sources":["../../../src/FlipTarget/FlipTarget.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef } from 'react';\nimport { createEventHandler, isElement, useProps } from '@mantine/core';\nimport { useFlipContext } from '../Flip.context';\n\nexport interface FlipTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that should be used to get element ref */\n refProp?: string;\n}\n\nconst defaultProps: Partial<FlipTargetProps> = {\n refProp: 'ref',\n};\n\nexport const FlipTarget = forwardRef<HTMLDivElement, FlipTargetProps>((props, ref) => {\n const { children, refProp, ...others } = useProps('
|
|
1
|
+
{"version":3,"file":"FlipTarget.cjs","sources":["../../../src/FlipTarget/FlipTarget.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef } from 'react';\nimport { createEventHandler, isElement, useProps } from '@mantine/core';\nimport { useFlipContext } from '../Flip.context';\n\nexport interface FlipTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that should be used to get element ref */\n refProp?: string;\n}\n\nconst defaultProps: Partial<FlipTargetProps> = {\n refProp: 'ref',\n};\n\nexport const FlipTarget = forwardRef<HTMLDivElement, FlipTargetProps>((props, ref) => {\n const { children, refProp, ...others } = useProps('FlipTarget', defaultProps, props);\n\n if (!isElement(children)) {\n throw new Error(\n 'Flip.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useFlipContext();\n\n const onClick = createEventHandler((children as React.ReactElement<any>).props.onClick, () =>\n ctx.toggleFlip()\n );\n\n return (\n <div ref={ref} {...others}>\n {cloneElement(children as React.ReactElement<any>, {\n onClick,\n 'data-flipped': ctx.flipped ? true : undefined,\n })}\n </div>\n );\n});\n\nFlipTarget.displayName = 'FlipTarget';\n"],"names":["forwardRef","useProps","isElement","useFlipContext","createEventHandler","cloneElement"],"mappings":"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"}
|
|
@@ -7,7 +7,7 @@ const defaultProps = {
|
|
|
7
7
|
refProp: "ref"
|
|
8
8
|
};
|
|
9
9
|
const FlipTarget = forwardRef((props, ref) => {
|
|
10
|
-
const { children, refProp, ...others } = useProps("
|
|
10
|
+
const { children, refProp, ...others } = useProps("FlipTarget", defaultProps, props);
|
|
11
11
|
if (!isElement(children)) {
|
|
12
12
|
throw new Error(
|
|
13
13
|
"Flip.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported"
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FlipTarget.mjs","sources":["../../../src/FlipTarget/FlipTarget.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef } from 'react';\nimport { createEventHandler, isElement, useProps } from '@mantine/core';\nimport { useFlipContext } from '../Flip.context';\n\nexport interface FlipTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that should be used to get element ref */\n refProp?: string;\n}\n\nconst defaultProps: Partial<FlipTargetProps> = {\n refProp: 'ref',\n};\n\nexport const FlipTarget = forwardRef<HTMLDivElement, FlipTargetProps>((props, ref) => {\n const { children, refProp, ...others } = useProps('
|
|
1
|
+
{"version":3,"file":"FlipTarget.mjs","sources":["../../../src/FlipTarget/FlipTarget.tsx"],"sourcesContent":["import React, { cloneElement, forwardRef } from 'react';\nimport { createEventHandler, isElement, useProps } from '@mantine/core';\nimport { useFlipContext } from '../Flip.context';\n\nexport interface FlipTargetProps {\n /** Target element */\n children: React.ReactNode;\n\n /** Key of the prop that should be used to get element ref */\n refProp?: string;\n}\n\nconst defaultProps: Partial<FlipTargetProps> = {\n refProp: 'ref',\n};\n\nexport const FlipTarget = forwardRef<HTMLDivElement, FlipTargetProps>((props, ref) => {\n const { children, refProp, ...others } = useProps('FlipTarget', defaultProps, props);\n\n if (!isElement(children)) {\n throw new Error(\n 'Flip.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n );\n }\n\n const ctx = useFlipContext();\n\n const onClick = createEventHandler((children as React.ReactElement<any>).props.onClick, () =>\n ctx.toggleFlip()\n );\n\n return (\n <div ref={ref} {...others}>\n {cloneElement(children as React.ReactElement<any>, {\n onClick,\n 'data-flipped': ctx.flipped ? true : undefined,\n })}\n </div>\n );\n});\n\nFlipTarget.displayName = 'FlipTarget';\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gfazioli/mantine-flip",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.4",
|
|
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",
|