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>;
      </>;
    }

    Install

    npm i use-typing-headlines

    DownloadsWeekly Downloads

    10

    Version

    0.9.1

    License

    MIT

    Unpacked Size

    11.4 kB

    Total Files

    9

    Last publish

    Collaborators

    • sambecker