@matteodicristofalo/text-animations 1.1.1 → 2.0.1

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.
Files changed (14) hide show
  1. package/README.md +23 -25
  2. package/dist/components/index.d.ts +2 -2
  3. package/dist/components/text-reveal/text-reveal.d.ts +92 -0
  4. package/dist/components/{split-text-reveal/split-text-reveal.stories.d.ts → text-reveal/text-reveal.stories.d.ts} +14 -5
  5. package/dist/components/{split-text-rotate → text-rotate}/split-text-rotate.stories.d.ts +8 -5
  6. package/dist/components/text-rotate/text-rotate.d.ts +60 -0
  7. package/dist/index.css +13 -13
  8. package/dist/index.js +50 -27
  9. package/dist/utils/jsx.d.ts +7 -0
  10. package/package.json +1 -1
  11. package/dist/components/split-text-reveal/split-test-reveal.types.d.ts +0 -13
  12. package/dist/components/split-text-reveal/split-text-reveal.d.ts +0 -3
  13. package/dist/components/split-text-rotate/split-text-rotate.d.ts +0 -3
  14. package/dist/components/split-text-rotate/split-text-rotate.types.d.ts +0 -9
package/README.md CHANGED
@@ -42,18 +42,21 @@ export default function RootLayout({
42
42
 
43
43
  Once imported the CSS you can use the React components.
44
44
 
45
- ## SplitTextReveal
45
+ ## textReveal
46
46
 
47
47
  ```js
48
48
  "use client";
49
49
 
50
- import { SplitTextReveal } from "@matteodicristofalo/text-animations";
50
+ import { textReveal } from "@matteodicristofalo/text-animations";
51
51
 
52
52
  export function MyComponent() {
53
53
  return (
54
- <h1>
55
- <SplitTextReveal text="Hello World" />
56
- </h1>
54
+ <>
55
+ <textReveal.h1 text="Hello World" />
56
+ <textReveal.h2 text="Hello World" />
57
+ <textReveal.p text="Hello World" />
58
+ <textReveal.span text="Hello World" />
59
+ </>
57
60
  );
58
61
  }
59
62
  ```
@@ -65,7 +68,7 @@ You can decide how to split the text between one of this options:
65
68
  - sentence
66
69
 
67
70
  ```js
68
- <SplitTextReveal text="Hello World" splitType="word" />
71
+ <textReveal.h1 text="Hello World" splitType="word" />
69
72
  ```
70
73
 
71
74
  You can also configure the reveal animation by specifying:
@@ -79,10 +82,10 @@ You can also configure the reveal animation by specifying:
79
82
  "use client";
80
83
 
81
84
  import { useMemo } from "react";
82
- import { SplitTextReveal } from "@matteodicristofalo/text-animations";
85
+ import { textReveal } from "@matteodicristofalo/text-animations";
83
86
 
84
87
  export function MyComponent() {
85
- const revealOptions = useMemo(
88
+ const animation = useMemo(
86
89
  () => ({
87
90
  duration: 1,
88
91
  stagger: 0.5,
@@ -92,26 +95,25 @@ export function MyComponent() {
92
95
  []
93
96
  );
94
97
 
95
- return (
96
- <h1>
97
- <SplitTextReveal text="Hello World" revealOptions={revealOptions} />
98
- </h1>
99
- );
98
+ return <textReveal.h1 text="Hello World" animation={animation} />;
100
99
  }
101
100
  ```
102
101
 
103
- ## SplitTextRotate
102
+ ## textRotate
104
103
 
105
104
  ```js
106
105
  "use client";
107
106
 
108
- import { SplitTextRotate } from "@matteodicristofalo/text-animations";
107
+ import { textRotate } from "@matteodicristofalo/text-animations";
109
108
 
110
109
  export function MyComponent() {
111
110
  return (
112
- <h1>
113
- <SplitTextRotate text="Hello World" />
114
- </h1>
111
+ <>
112
+ <textRotate.h1 text="Hello World" />
113
+ <textRotate.h1 text="Hello World" />
114
+ <textRotate.p text="Hello World" />
115
+ <textRotate.span text="Hello World" />
116
+ </>
115
117
  );
116
118
  }
117
119
  ```
@@ -122,10 +124,10 @@ This component split always by char, the only thing you can configure is the rot
122
124
  "use client";
123
125
 
124
126
  import { useMemo } from "react";
125
- import { SplitTextRotate } from "@matteodicristofalo/text-animations";
127
+ import { textRotate } from "@matteodicristofalo/text-animations";
126
128
 
127
129
  export function MyComponent() {
128
- const rotateOptions = useMemo(
130
+ const animation = useMemo(
129
131
  () => ({
130
132
  duration: 1,
131
133
  stagger: 0.5,
@@ -133,10 +135,6 @@ export function MyComponent() {
133
135
  []
134
136
  );
135
137
 
136
- return (
137
- <h1>
138
- <SplitTextRotate text="Hello World" rotateOptions={rotateOptions} />
139
- </h1>
140
- );
138
+ return <textRotate.h1 text="Hello World" animation={animation} />;
141
139
  }
142
140
  ```
package/dist/components/index.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- export { SplitTextReveal } from "./split-text-reveal/split-text-reveal";
2
- export { SplitTextRotate } from "./split-text-rotate/split-text-rotate";
1
+ export * from "./text-reveal/text-reveal";
2
+ export * from "./text-rotate/text-rotate";
package/dist/components/text-reveal/text-reveal.d.ts ADDED
@@ -0,0 +1,92 @@
1
+ import React from "react";
2
+ declare const textReveal: {
3
+ h1: React.FC<{
4
+ text: string;
5
+ splitType?: "sentence" | "word" | "char";
6
+ animation?: Partial<{
7
+ duration: number;
8
+ delay: number;
9
+ stagger: number;
10
+ threshold: number;
11
+ once: boolean;
12
+ }>;
13
+ }>;
14
+ h2: React.FC<{
15
+ text: string;
16
+ splitType?: "sentence" | "word" | "char";
17
+ animation?: Partial<{
18
+ duration: number;
19
+ delay: number;
20
+ stagger: number;
21
+ threshold: number;
22
+ once: boolean;
23
+ }>;
24
+ }>;
25
+ h3: React.FC<{
26
+ text: string;
27
+ splitType?: "sentence" | "word" | "char";
28
+ animation?: Partial<{
29
+ duration: number;
30
+ delay: number;
31
+ stagger: number;
32
+ threshold: number;
33
+ once: boolean;
34
+ }>;
35
+ }>;
36
+ h4: React.FC<{
37
+ text: string;
38
+ splitType?: "sentence" | "word" | "char";
39
+ animation?: Partial<{
40
+ duration: number;
41
+ delay: number;
42
+ stagger: number;
43
+ threshold: number;
44
+ once: boolean;
45
+ }>;
46
+ }>;
47
+ h5: React.FC<{
48
+ text: string;
49
+ splitType?: "sentence" | "word" | "char";
50
+ animation?: Partial<{
51
+ duration: number;
52
+ delay: number;
53
+ stagger: number;
54
+ threshold: number;
55
+ once: boolean;
56
+ }>;
57
+ }>;
58
+ h6: React.FC<{
59
+ text: string;
60
+ splitType?: "sentence" | "word" | "char";
61
+ animation?: Partial<{
62
+ duration: number;
63
+ delay: number;
64
+ stagger: number;
65
+ threshold: number;
66
+ once: boolean;
67
+ }>;
68
+ }>;
69
+ p: React.FC<{
70
+ text: string;
71
+ splitType?: "sentence" | "word" | "char";
72
+ animation?: Partial<{
73
+ duration: number;
74
+ delay: number;
75
+ stagger: number;
76
+ threshold: number;
77
+ once: boolean;
78
+ }>;
79
+ }>;
80
+ span: React.FC<{
81
+ text: string;
82
+ splitType?: "sentence" | "word" | "char";
83
+ animation?: Partial<{
84
+ duration: number;
85
+ delay: number;
86
+ stagger: number;
87
+ threshold: number;
88
+ once: boolean;
89
+ }>;
90
+ }>;
91
+ };
92
+ export { textReveal };
package/dist/components/{split-text-reveal/split-text-reveal.stories.d.ts → text-reveal/text-reveal.stories.d.ts} RENAMED
@@ -1,9 +1,18 @@
1
1
  import React from "react";
2
2
  import type { StoryObj } from "@storybook/react";
3
- import { SplitTextReveal } from "./split-text-reveal";
4
3
  declare const meta: {
5
4
  title: string;
6
- component: typeof SplitTextReveal;
5
+ component: React.FC<{
6
+ text: string;
7
+ splitType?: "sentence" | "word" | "char";
8
+ animation?: Partial<{
9
+ duration: number;
10
+ delay: number;
11
+ stagger: number;
12
+ threshold: number;
13
+ once: boolean;
14
+ }>;
15
+ }>;
7
16
  argTypes: {
8
17
  text: {
9
18
  control: "text";
@@ -12,7 +21,7 @@ declare const meta: {
12
21
  control: "radio";
13
22
  options: string[];
14
23
  };
15
- revealOptions: {
24
+ animation: {
16
25
  control: {
17
26
  type: "object";
18
27
  };
@@ -22,7 +31,6 @@ declare const meta: {
22
31
  text: string;
23
32
  splitType: "char";
24
33
  };
25
- render: (args: import("./split-test-reveal.types").SplitTextRevealProps) => React.JSX.Element;
26
34
  };
27
35
  export default meta;
28
36
  type Story = StoryObj<typeof meta>;
@@ -30,6 +38,7 @@ export declare const Default: Story;
30
38
  export declare const SplitByWord: Story;
31
39
  export declare const SplitBySentence: Story;
32
40
  export declare const Duration: Story;
41
+ export declare const Delay: Story;
33
42
  export declare const Stagger: Story;
34
43
  export declare const Threshold: Story;
35
- export declare const NotOnce: Story;
44
+ export declare const MultipleTimes: Story;
package/dist/components/{split-text-rotate → text-rotate}/split-text-rotate.stories.d.ts RENAMED
@@ -1,14 +1,18 @@
1
- import React from "react";
2
1
  import type { StoryObj } from "@storybook/react";
3
- import { SplitTextRotate } from "./split-text-rotate";
4
2
  declare const meta: {
5
3
  title: string;
6
- component: typeof SplitTextRotate;
4
+ component: import("react").FC<{
5
+ text: string;
6
+ animation?: Partial<{
7
+ duration: number;
8
+ stagger: number;
9
+ }>;
10
+ }>;
7
11
  argTypes: {
8
12
  text: {
9
13
  control: "text";
10
14
  };
11
- rotateOptions: {
15
+ animation: {
12
16
  control: {
13
17
  type: "object";
14
18
  };
@@ -17,7 +21,6 @@ declare const meta: {
17
21
  args: {
18
22
  text: string;
19
23
  };
20
- render: (args: import("./split-text-rotate.types").SplitTextRotateProps) => React.JSX.Element;
21
24
  };
22
25
  export default meta;
23
26
  type Story = StoryObj<typeof meta>;
package/dist/components/text-rotate/text-rotate.d.ts ADDED
@@ -0,0 +1,60 @@
1
+ import React from "react";
2
+ declare const textRotate: {
3
+ h1: React.FC<{
4
+ text: string;
5
+ animation?: Partial<{
6
+ duration: number;
7
+ stagger: number;
8
+ }>;
9
+ }>;
10
+ h2: React.FC<{
11
+ text: string;
12
+ animation?: Partial<{
13
+ duration: number;
14
+ stagger: number;
15
+ }>;
16
+ }>;
17
+ h3: React.FC<{
18
+ text: string;
19
+ animation?: Partial<{
20
+ duration: number;
21
+ stagger: number;
22
+ }>;
23
+ }>;
24
+ h4: React.FC<{
25
+ text: string;
26
+ animation?: Partial<{
27
+ duration: number;
28
+ stagger: number;
29
+ }>;
30
+ }>;
31
+ h5: React.FC<{
32
+ text: string;
33
+ animation?: Partial<{
34
+ duration: number;
35
+ stagger: number;
36
+ }>;
37
+ }>;
38
+ h6: React.FC<{
39
+ text: string;
40
+ animation?: Partial<{
41
+ duration: number;
42
+ stagger: number;
43
+ }>;
44
+ }>;
45
+ p: React.FC<{
46
+ text: string;
47
+ animation?: Partial<{
48
+ duration: number;
49
+ stagger: number;
50
+ }>;
51
+ }>;
52
+ span: React.FC<{
53
+ text: string;
54
+ animation?: Partial<{
55
+ duration: number;
56
+ stagger: number;
57
+ }>;
58
+ }>;
59
+ };
60
+ export { textRotate };
package/dist/index.css CHANGED
@@ -1,51 +1,51 @@
1
- .split-text-reveal-module_text__-9O5o {
1
+ .text-reveal-module_text__YrhhT {
2
2
  position: relative;
3
3
  }
4
- .split-text-reveal-module_text__-9O5o .split-text-reveal-module_is-hidden__2J8-i {
4
+ .text-reveal-module_text__YrhhT .text-reveal-module_is-hidden__B7wsX {
5
5
  opacity: 0;
6
6
  }
7
- .split-text-reveal-module_text__-9O5o .split-text-reveal-module_sr-only__luZuY {
7
+ .text-reveal-module_text__YrhhT .text-reveal-module_sr-only__ZQJa3 {
8
8
  height: 0;
9
9
  overflow: hidden;
10
10
  position: absolute;
11
11
  width: 0;
12
12
  }
13
- .split-text-reveal-module_text__-9O5o .split-text-reveal-module_container__mkD-P {
13
+ .text-reveal-module_text__YrhhT .text-reveal-module_container__HD1Pu {
14
14
  display: inline-flex;
15
15
  overflow: hidden;
16
16
  }
17
- .split-text-reveal-module_text__-9O5o .split-text-reveal-module_container__mkD-P span {
17
+ .text-reveal-module_text__YrhhT .text-reveal-module_container__HD1Pu span {
18
18
  min-width: 0.25em;
19
19
  transform: translateY(100%);
20
- transition-delay: var(--var-delay);
20
+ transition-delay: calc(var(--var-delay) + var(--var-stagger));
21
21
  transition-duration: var(--var-duration);
22
22
  transition-property: transform;
23
23
  transition-timing-function: ease-out;
24
24
  will-change: transform;
25
25
  }
26
- .split-text-reveal-module_text__-9O5o.split-text-reveal-module_animate__y6o78 .split-text-reveal-module_container__mkD-P span {
26
+ .text-reveal-module_text__YrhhT.text-reveal-module_animate__kbOPX .text-reveal-module_container__HD1Pu span {
27
27
  transform: translateY(0);
28
28
  }
29
- .split-text-rotate-module_text__xzran {
29
+ .text-rotate-module_text__WKSY- {
30
30
  display: block;
31
31
  overflow: hidden;
32
32
  position: relative;
33
33
  }
34
- .split-text-rotate-module_text__xzran .split-text-rotate-module_sr-only__Dbb9O {
34
+ .text-rotate-module_text__WKSY- .text-rotate-module_sr-only__1ofAD {
35
35
  height: 0;
36
36
  overflow: hidden;
37
37
  position: absolute;
38
38
  width: 0;
39
39
  }
40
- .split-text-rotate-module_text__xzran .split-text-rotate-module_container__EAJkE {
40
+ .text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm {
41
41
  display: flex;
42
42
  }
43
- .split-text-rotate-module_text__xzran .split-text-rotate-module_container__EAJkE:nth-of-type(2) {
43
+ .text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm:nth-of-type(2) {
44
44
  position: absolute;
45
45
  top: 0;
46
46
  transform: translateY(100%);
47
47
  }
48
- .split-text-rotate-module_text__xzran .split-text-rotate-module_container__EAJkE .split-text-rotate-module_char__PYJ-k {
48
+ .text-rotate-module_text__WKSY- .text-rotate-module_container__2qsrm .text-rotate-module_char__LG3ps {
49
49
  display: inline-block;
50
50
  min-width: 0.25em;
51
51
  transition-delay: var(--var-delay-out);
@@ -54,7 +54,7 @@
54
54
  transition-timing-function: ease-out;
55
55
  will-change: transform;
56
56
  }
57
- .split-text-rotate-module_text__xzran:hover .split-text-rotate-module_container__EAJkE .split-text-rotate-module_char__PYJ-k {
57
+ .text-rotate-module_text__WKSY-:hover .text-rotate-module_container__2qsrm .text-rotate-module_char__LG3ps {
58
58
  transform: translateY(-100%);
59
59
  transition-delay: var(--var-delay-in);
60
60
  }
package/dist/index.js CHANGED
@@ -78,34 +78,51 @@ function useIntersectionObserver(ref, options) {
78
78
  return isIntersecting;
79
79
  }
80
80
 
81
+ var htmlTextElementTags = [
82
+ "h1",
83
+ "h2",
84
+ "h3",
85
+ "h4",
86
+ "h5",
87
+ "h6",
88
+ "p",
89
+ "span",
90
+ ];
91
+ function generateJsxVariations(component) {
92
+ return htmlTextElementTags.reduce(function (variations, Tag) {
93
+ variations[Tag] = function (props) { return React.createElement(Tag, null, component(props)); };
94
+ return variations;
95
+ }, {});
96
+ }
97
+
81
98
  function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
82
99
 
83
- var styles$1 = {"text":"split-text-reveal-module_text__-9O5o","is-hidden":"split-text-reveal-module_is-hidden__2J8-i","sr-only":"split-text-reveal-module_sr-only__luZuY","container":"split-text-reveal-module_container__mkD-P","animate":"split-text-reveal-module_animate__y6o78"};
100
+ var styles$1 = {"text":"text-reveal-module_text__YrhhT","is-hidden":"text-reveal-module_is-hidden__B7wsX","sr-only":"text-reveal-module_sr-only__ZQJa3","container":"text-reveal-module_container__HD1Pu","animate":"text-reveal-module_animate__kbOPX"};
84
101
 
85
102
  var DEFAULT_DURATION$1 = 0.5;
86
103
  var DEFAULT_STAGGER$1 = 0.01;
87
104
  var MIN_THRESHOLD = 0;
88
105
  var MAX_THRESHOLD = 1;
89
106
  var DEFAULT_THRESHOLD = 0.25;
90
- function SplitTextReveal(_a) {
107
+ function TextReveal(_a) {
91
108
  var _b;
92
- var text = _a.text, _c = _a.splitType, splitType = _c === void 0 ? "char" : _c, revealOptions = _a.revealOptions;
109
+ var text = _a.text, _c = _a.splitType, splitType = _c === void 0 ? "char" : _c, animation = _a.animation;
93
110
  var ref = useRef(null);
94
111
  var _d = useState(false), hasBeenMounted = _d[0], setHasBeenMounted = _d[1];
95
- var memoizedOptions = useMemo(function () {
112
+ var intersectionObserverOptions = useMemo(function () {
96
113
  var _a;
97
- var once = (_a = revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.once) !== null && _a !== void 0 ? _a : true;
98
- var threshold = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.threshold)
99
- ? clamp(revealOptions.threshold, MIN_THRESHOLD, MAX_THRESHOLD)
114
+ var once = (_a = animation === null || animation === void 0 ? void 0 : animation.once) !== null && _a !== void 0 ? _a : true;
115
+ var threshold = (animation === null || animation === void 0 ? void 0 : animation.threshold)
116
+ ? clamp(animation.threshold, MIN_THRESHOLD, MAX_THRESHOLD)
100
117
  : DEFAULT_THRESHOLD;
101
118
  return {
102
119
  once: once,
103
120
  threshold: threshold,
104
121
  };
105
- }, [revealOptions]);
106
- var isInView = useIntersectionObserver(ref, memoizedOptions);
107
- var transitionDuration = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.duration) || DEFAULT_DURATION$1;
108
- var transitionStagger = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.stagger) || DEFAULT_STAGGER$1;
122
+ }, [animation]);
123
+ var isInView = useIntersectionObserver(ref, intersectionObserverOptions);
124
+ var duration = (animation === null || animation === void 0 ? void 0 : animation.duration) || DEFAULT_DURATION$1;
125
+ var stagger = (animation === null || animation === void 0 ? void 0 : animation.stagger) || DEFAULT_STAGGER$1;
109
126
  var splittedText = useMemo(function () {
110
127
  switch (splitType) {
111
128
  case "sentence":
@@ -120,39 +137,44 @@ function SplitTextReveal(_a) {
120
137
  setHasBeenMounted(true);
121
138
  }, []);
122
139
  return (React.createElement("span", { ref: ref, className: clsx(styles$1["text"], (_b = {}, _b[styles$1["animate"]] = isInView, _b)), style: {
123
- "--var-duration": "".concat(transitionDuration, "s"),
140
+ "--var-duration": "".concat(duration, "s"),
124
141
  } }, hasBeenMounted ? (React.createElement(React.Fragment, null,
125
142
  React.createElement("span", { className: styles$1["sr-only"] }, text),
126
- splittedText.map(function (el, i) { return (React.createElement("span", { key: i, className: styles$1["container"], "aria-hidden": "true" },
127
- React.createElement("span", { "aria-hidden": "true", style: {
128
- "--var-delay": "".concat(round(transitionStagger * i, 3), "s"),
129
- } }, el))); }))) : (React.createElement("span", { className: styles$1["is-hidden"] }, text))));
143
+ splittedText.map(function (el, i) {
144
+ var _a;
145
+ return (React.createElement("span", { key: i, className: styles$1["container"], "aria-hidden": "true" },
146
+ React.createElement("span", { "aria-hidden": "true", style: {
147
+ "--var-delay": "".concat((_a = animation === null || animation === void 0 ? void 0 : animation.delay) !== null && _a !== void 0 ? _a : 0, "s"),
148
+ "--var-stagger": "".concat(round(stagger * i, 3), "s"),
149
+ } }, el)));
150
+ }))) : (React.createElement("span", { className: styles$1["is-hidden"] }, text))));
130
151
  }
152
+ var textReveal = generateJsxVariations(TextReveal);
131
153
 
132
- var styles = {"text":"split-text-rotate-module_text__xzran","sr-only":"split-text-rotate-module_sr-only__Dbb9O","container":"split-text-rotate-module_container__EAJkE","char":"split-text-rotate-module_char__PYJ-k"};
154
+ var styles = {"text":"text-rotate-module_text__WKSY-","sr-only":"text-rotate-module_sr-only__1ofAD","container":"text-rotate-module_container__2qsrm","char":"text-rotate-module_char__LG3ps"};
133
155
 
134
156
  var DEFAULT_DURATION = 0.25;
135
157
  var DEFAULT_STAGGER = 0.025;
136
- function SplitTextRotate(_a) {
137
- var text = _a.text, rotateOptions = _a.rotateOptions;
158
+ function TextRotate(_a) {
159
+ var text = _a.text, animation = _a.animation;
138
160
  var _b = useState(false), hasBeenMounted = _b[0], setHasBeenMounted = _b[1];
139
161
  var splittedText = useMemo(function () { return characters(text); }, [text]);
140
162
  var _c = useMemo(function () { return ({
141
- transitionDuration: (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.duration) || DEFAULT_DURATION,
142
- transitionStagger: (rotateOptions === null || rotateOptions === void 0 ? void 0 : rotateOptions.stagger) || DEFAULT_STAGGER,
143
- }); }, [rotateOptions]), transitionDuration = _c.transitionDuration, transitionStagger = _c.transitionStagger;
163
+ duration: (animation === null || animation === void 0 ? void 0 : animation.duration) || DEFAULT_DURATION,
164
+ stagger: (animation === null || animation === void 0 ? void 0 : animation.stagger) || DEFAULT_STAGGER,
165
+ }); }, [animation]), duration = _c.duration, stagger = _c.stagger;
144
166
  var delays = useCallback(function (index) {
145
167
  var noElementsZeroBased = splittedText.length - 1;
146
168
  return {
147
- in: round(transitionStagger * index, 3),
148
- out: round(transitionStagger * (noElementsZeroBased - index), 3),
169
+ in: round(stagger * index, 3),
170
+ out: round(stagger * (noElementsZeroBased - index), 3),
149
171
  };
150
- }, [splittedText, transitionStagger]);
172
+ }, [splittedText, stagger]);
151
173
  useEffect(function () {
152
174
  setHasBeenMounted(true);
153
175
  }, []);
154
176
  return (React.createElement("span", { className: styles["text"], style: {
155
- "--var-duration": "".concat(transitionDuration, "s"),
177
+ "--var-duration": "".concat(duration, "s"),
156
178
  } }, hasBeenMounted ? (React.createElement(React.Fragment, null,
157
179
  React.createElement("span", { className: styles["sr-only"] }, text),
158
180
  Array.from({ length: 2 }).map(function (_, i) { return (React.createElement("span", { key: i, className: styles["container"], "aria-hidden": "true" }, splittedText.map(function (char, i) {
@@ -163,5 +185,6 @@ function SplitTextRotate(_a) {
163
185
  } }, char));
164
186
  }))); }))) : (React.createElement("span", null, text))));
165
187
  }
188
+ var textRotate = generateJsxVariations(TextRotate);
166
189
 
167
- export { SplitTextReveal, SplitTextRotate };
190
+ export { textReveal, textRotate };
package/dist/utils/jsx.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import React from "react";
2
+ declare const htmlTextElementTags: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "p", "span"];
3
+ type HtmlTextElementTag = (typeof htmlTextElementTags)[number];
4
+ export declare function generateJsxVariations<Props>(component: React.FC<Props>): {
5
+ [k in HtmlTextElementTag]: React.FC<Props>;
6
+ };
7
+ export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@matteodicristofalo/text-animations",
3
- "version": "1.1.1",
3
+ "version": "2.0.1",
4
4
  "description": "React library to animate text",
5
5
  "scripts": {
6
6
  "build": "rimraf dist && rollup -c",
package/dist/components/split-text-reveal/split-test-reveal.types.d.ts DELETED
@@ -1,13 +0,0 @@
1
- export type SplitTextRevealProps = {
2
- text: string;
3
- splitType?: SplitType;
4
- revealOptions?: Partial<RevealOptions>;
5
- };
6
- type SplitType = "sentence" | "word" | "char";
7
- type RevealOptions = {
8
- duration: number;
9
- stagger: number;
10
- threshold: number;
11
- once: boolean;
12
- };
13
- export {};
package/dist/components/split-text-reveal/split-text-reveal.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- import { SplitTextRevealProps } from "./split-test-reveal.types";
3
- export declare function SplitTextReveal({ text, splitType, revealOptions, }: SplitTextRevealProps): React.JSX.Element;
package/dist/components/split-text-rotate/split-text-rotate.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import React from "react";
2
- import { SplitTextRotateProps } from "./split-text-rotate.types";
3
- export declare function SplitTextRotate({ text, rotateOptions }: SplitTextRotateProps): React.JSX.Element;
package/dist/components/split-text-rotate/split-text-rotate.types.d.ts DELETED
@@ -1,9 +0,0 @@
1
- export type SplitTextRotateProps = {
2
- text: string;
3
- rotateOptions?: Partial<RotateOptions>;
4
- };
5
- type RotateOptions = {
6
- duration: number;
7
- stagger: number;
8
- };
9
- export {};