@matteodicristofalo/text-animations 1.0.4 → 1.1.0

package/README.md

@@ -14,7 +14,7 @@ pnpm add @matteodicristofalo/text-animations
 
 # Usage
 
-The first thing to do in order to use this library is to import it's CSS.
+The first thing to do in order to use this library is to import its CSS.
 
 The following example is for a Next.js App but you can apply the same concept for different frameworks
 
@@ -42,55 +42,59 @@ export default function RootLayout({
 
 Once imported the CSS you can use the React components.
 
-## SplitTextRevel
+## SplitTextReveal
 
 ```js
 "use client";
 
-import { SplitTextRevel } from "@matteodicristofalo/text-animations";
+import { SplitTextReveal } from "@matteodicristofalo/text-animations";
 
 export function MyComponent() {
   return (
     <h1>
-      <SplitTextRevel text="Hello World" />
+      <SplitTextReveal text="Hello World" />
     </h1>
   );
 }
 ```
 
-You can also choose how to split the text between one of this options:
+You can decide how to split the text between one of this options:
 
-- char
+- char (default)
 - word
 - sentence
 
 ```js
-<SplitTextRevel text="Hello World" splitType="word" />
+<SplitTextReveal text="Hello World" splitType="word" />
 ```
 
 You can also configure the reveal animation by specifying:
 
-- duration
-- stagger
+- duration (number in seconds)
+- stagger (number in seconds)
+- threshold (number between 0 and 1)
+- once (boolean)
 
 ```js
 "use client";
 
 import { useMemo } from "react";
-import { SplitTextRevel } from "@matteodicristofalo/text-animations";
+import { SplitTextReveal } from "@matteodicristofalo/text-animations";
 
 export function MyComponent() {
   const revealOptions = useMemo(
     () => ({
       duration: 1,
       stagger: 0.5,
+      threshold: 0.75,
+      once: false,
     }),
     []
   );
 
   return (
     <h1>
-      <SplitTextRevel text="Hello World" revealOptions={revealOptions} />
+      <SplitTextReveal text="Hello World" revealOptions={revealOptions} />
     </h1>
   );
 }
@@ -112,7 +116,7 @@ export function MyComponent() {
 }
 ```
 
-Also here you can configure the aniimation
+This component split always by char, the only thing you can configure is the rotate animation
 
 ```js
 "use client";

package/dist/components/split-text-reveal/split-test-reveal.types.d.ts

@@ -7,5 +7,7 @@ type SplitType = "sentence" | "word" | "char";
 type RevealOptions = {
     duration: number;
     stagger: number;
+    threshold: number;
+    once: boolean;
 };
 export {};

package/dist/components/split-text-reveal/split-text-reveal.stories.d.ts

@@ -1,11 +1,9 @@
+import React from "react";
 import type { StoryObj } from "@storybook/react";
 import { SplitTextReveal } from "./split-text-reveal";
 declare const meta: {
     title: string;
     component: typeof SplitTextReveal;
-    parameters: {
-        layout: string;
-    };
     argTypes: {
         text: {
             control: "text";
@@ -20,7 +18,18 @@ declare const meta: {
             };
         };
     };
+    args: {
+        text: string;
+        splitType: "char";
+    };
+    render: (args: import("./split-test-reveal.types").SplitTextRevealProps) => React.JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const SplitByWord: Story;
+export declare const SplitBySentence: Story;
+export declare const Duration: Story;
+export declare const Stagger: Story;
+export declare const Threshold: Story;
+export declare const NotOnce: Story;

package/dist/components/split-text-rotate/split-text-rotate.stories.d.ts

@@ -1,11 +1,9 @@
+import React from "react";
 import type { StoryObj } from "@storybook/react";
 import { SplitTextRotate } from "./split-text-rotate";
 declare const meta: {
     title: string;
     component: typeof SplitTextRotate;
-    parameters: {
-        layout: string;
-    };
     argTypes: {
         text: {
             control: "text";
@@ -16,7 +14,13 @@ declare const meta: {
             };
         };
     };
+    args: {
+        text: string;
+    };
+    render: (args: import("./split-text-rotate.types").SplitTextRotateProps) => React.JSX.Element;
 };
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
+export declare const Duration: Story;
+export declare const Stagger: Story;

package/dist/index.js

@@ -4,6 +4,9 @@ import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react'
 function round(num, digits) {
     return parseFloat(num.toFixed(digits));
 }
+function clamp(n, min, max) {
+    return Math.min(Math.max(min, n), max);
+}
 
 function sentences(text) {
     return segment(text, "sentence");
@@ -81,12 +84,25 @@ var styles$1 = {"text":"split-text-reveal-module_text__-9O5o","is-hidden":"split
 
 var DEFAULT_DURATION$1 = 0.5;
 var DEFAULT_STAGGER$1 = 0.01;
+var MIN_THRESHOLD = 0;
+var MAX_THRESHOLD = 1;
+var DEFAULT_THRESHOLD = 0.25;
 function SplitTextReveal(_a) {
     var _b;
     var text = _a.text, _c = _a.splitType, splitType = _c === void 0 ? "char" : _c, revealOptions = _a.revealOptions;
-    var _d = useState(false), hasBeenMounted = _d[0], setHasBeenMounted = _d[1];
     var ref = useRef(null);
-    var memoizedOptions = useMemo(function () { return ({ once: true, threshold: 0.1 }); }, []);
+    var _d = useState(false), hasBeenMounted = _d[0], setHasBeenMounted = _d[1];
+    var memoizedOptions = useMemo(function () {
+        var _a;
+        var once = (_a = revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.once) !== null && _a !== void 0 ? _a : true;
+        var threshold = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.threshold)
+            ? clamp(revealOptions.threshold, MIN_THRESHOLD, MAX_THRESHOLD)
+            : DEFAULT_THRESHOLD;
+        return {
+            once: once,
+            threshold: threshold,
+        };
+    }, [revealOptions]);
     var isInView = useIntersectionObserver(ref, memoizedOptions);
     var transitionDuration = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.duration) || DEFAULT_DURATION$1;
     var transitionStagger = (revealOptions === null || revealOptions === void 0 ? void 0 : revealOptions.stagger) || DEFAULT_STAGGER$1;

package/dist/utils/numbers.d.ts

@@ -1 +1,2 @@
 export declare function round(num: number, digits: number): number;
+export declare function clamp(n: number, min: number, max: number): number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@matteodicristofalo/text-animations",
-  "version": "1.0.4",
+  "version": "1.1.0",
   "description": "React library to animate text",
   "scripts": {
     "build": "rimraf dist && rollup -c",