arha-split-text

arha-split-text

A react component to split passed in children-prop into word elements and each word into character elements. This lets developers do f.e. word / character based animations for a text.

Installation

• $ pnpm add arha-split-text
• $ npm install arha-split-text
• $ yarn add arha-split-text

Demo

GSAP

Example usage

import React from "react";
import { SplitText } from "arha-split-text";

function App() {
  return <SplitText>foo bar</SplitText>;
}

export default App;

// output:
//  <div>
//    <div>
//      <div>f</div>
//      <div>o</div>
//      <div>o</div>
//    </div>
//    <div></div>
//    <div>
//      <div>b</div>
//      <div>a</div>
//      <div>r</div>
//    </div>
//  </div>
//

SplitText also accepts additional props, so developers can have more control over the output.

import React from "react";
import { SplitText } from "arha-split-text";

/**
 * Example container component
 */
const Container = ({ children }) => (
  <h1 className="my-cool-split-text">{children}</h1>
);

/**
 * Example word component
 */
const Word = ({ children, i }) => (
  <span className={`word word-${i}`}>{children}</span>
);

/**
 * Example Space component
 */
const Space = () => <span>&nbsp;</span>;

/**
 * Example Char component
 */
const Char = ({ children, i }) => (
  <span className={`char char-${i}`}>{children}</span>
);

function App() {
  return (
    <SplitText
      ContainerElement={Container} // or alternatively "h1"
      WordElement={Word}
      CharElement={Char}
      SpaceElement={Space}
    >
      awesome component
    </SplitText>
  );
}

export default App;

//  <h1 class="my-cool-split-text">
//    <span class="word word-0">
//      <span class="char char-0">a</span>
//      <span class="char char-1">w</span>
//      <span class="char char-2">e</span>
//      <span class="char char-3">s</span>
//      <span class="char char-4">o</span>
//      <span class="char char-5">m</span>
//      <span class="char char-6">e</span>
//    </span>
//    <span>&nbsp;</span>
//    <span class="word word-1">
//      <span class="char char-0">c</span>
//      <span class="char char-1">o</span>
//      <span class="char char-2">m</span>
//      <span class="char char-3">p</span>
//      <span class="char char-4">o</span>
//      <span class="char char-5">n</span>
//      <span class="char char-6">e</span>
//      <span class="char char-7">n</span>
//      <span class="char char-8">t</span>
//    </span>
//  </h1>

Typescript

When using this in Typescript use following types from the package.

import React from "react";
import { SplitText } from "arha-split-text";
import type { FC } from "react";
import type { WordCharProps, ContainerProps } from "arha-split-text";

const Container: FC<ContainerProps> = ({ children }) => (
  <div className="container">{children}</div>
);

const Word: FC<WordCharProps> = ({ children, i }) => (
  <span className={`w-${i}`}>{children}</span>
);

const Char: FC<WordCharProps> = ({ children, i }) => (
  <span className={`c-${i}`}>{children}</span>
);

const App = () => (
  <SplitText ContainerElement={Container} WordElement={Word} CharElement={Char}>
    awesome component
  </SplitText>
);

Props