4.0.3 • Published 10 months ago
arha-split-text v4.0.3
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
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> </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> </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
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 |
4.0.3
10 months ago
4.0.1
1 year ago
4.0.0
1 year ago
4.0.2
1 year ago
3.0.4
1 year ago
3.0.3
1 year ago
3.0.2
2 years ago
3.0.1
2 years ago
3.0.0
2 years ago
2.0.1
3 years ago
2.0.0
3 years ago
1.0.8
3 years ago
1.0.7
4 years ago
1.0.6
4 years ago
1.0.5
4 years ago
1.0.4
4 years ago
1.0.2
4 years ago
1.0.3
4 years ago
1.0.1
4 years ago
1.0.0
4 years ago