use-typing-headlines
TypeScript icon, indicating that this package has built-in type declarations

0.9.1 • Public • Published

💻 useTypingHeadlines

React hook designed to display animated headlines

Installation

npm install use-typing-headlines

Usage

One headline

One headline preview

import { useTypingHeadlines } from 'use-typing-headlines';

const Component = () => {
  const [headline] = useTypingHeadlines([
    'First you see this',
    'Then you see this',
    'Lastly, this',
  ]);

  return <h1>{headline}</h1>;
}

Multiple headlines

Two headlines preview

const Component = () => {
  const [headlineOne] = useTypingHeadlines([
    'Peanut Butter',
    'Copy',
    'Barb',
    'Arts',
  ]);

  const [headlineTwo] = useTypingHeadlines([
    'Jelly',
    'Paste',
    'Star',
    'Crafts',
  ]);

  return <h1>
    {headlineOne} &amp;<br />
    {headlineTwo}<span style={{ visibility: 'hidden' }}>_</span>
  </h1>;
}

Accessibility (BETA)

const Component = () => {
  const [headlineLive, headlineStatic] = useTypingHeadlines([
    'This text will be tranlated for screen readers',
    'Updating one full word at a time ...',
  ]);

  return <>
    <h1 role="img" aria-describedby="ariaId">
      {headlineLive}
    </h1>
    <div id="ariaId" aria-live="polite" style={{ visible: 'hidden' }}>
      {headlineStatic}
    </div>;
  </>;
}

Package Sidebar

Install

npm i use-typing-headlines

Weekly Downloads

9

Version

0.9.1

License

MIT

Unpacked Size

11.4 kB

Total Files

9

Last publish

Collaborators

  • sambecker