# arha-split-text

> A react component that splits passed in `children`-prop into word-spans and each word-span into character-spans. This lets developers do f.e. word / character based animations for text-elements.

Latest version **4.0.3** (published 2023-07-26) · ISC license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install arha-split-text
pnpm add arha-split-text
yarn add arha-split-text
bun add arha-split-text
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 4.0.3 |
| Published | 2023-07-26 |
| First published | 2020-04-04 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 18 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Atte Liimatainen |
| Maintainers | atte.liimatainen |
| Keywords | react, split, text |

## Links

- npm: https://www.npmjs.com/package/arha-split-text
- Repository: https://github.com/AttLii/arha-split-text
- Homepage: https://github.com/AttLii/arha-split-text#readme
- Issues: https://github.com/AttLii/arha-split-text/issues
- npm.io page: https://npm.io/package/arha-split-text

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.0.3 (latest) — 2023-07-26
- 4.0.2 — 2023-04-18
- 4.0.0 — 2023-04-18
- 3.0.4 — 2023-01-19
- 3.0.3 — 2023-01-19
- 3.0.2 — 2022-11-09
- 3.0.1 — 2022-09-07
- 3.0.0 — 2022-01-22
- 2.0.1 — 2021-08-24
- 2.0.0 — 2021-08-24
- 1.0.8 — 2021-08-17
- 1.0.7 — 2020-04-09
- 1.0.6 — 2020-04-08
- 1.0.5 — 2020-04-08
- 1.0.4 — 2020-04-08
- … 4 more at https://npm.io/package/arha-split-text/versions

## README

# 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](https://codepen.io/attlii/pen/XWevROE)

## Example usage

```jsx
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.

```jsx
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.

```tsx
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

| Prop               | Description                                                     | Type                               |
| ------------------ | --------------------------------------------------------------- | ---------------------------------- |
| `children`         | string needed to be split                                       | string                             |
| `ContainerElement` | overrides default container element (by default `div`)          | string or function/class component |
| `WordElement`      | overrides default word element (by default `div`)               | string or function/class component |
| `CharElement`      | overrides default char element (by default `div`)               | string or function/class component |
| `SpaceElement`     | overrides default space element (by default `<div>{" "}</div>`) | string or function/class component |

---
_Source: https://npm.io/package/arha-split-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._