https://github.com/sambecker/use-typing-headlines

React hook designed to display animated headlines
https://github.com/sambecker/use-typing-headlines

Last synced: 12 months ago
JSON representation

React hook designed to display animated headlines

• Host: GitHub
• URL: https://github.com/sambecker/use-typing-headlines
• Owner: sambecker
• License: mit
• Created: 2022-01-06T16:40:50.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2022-01-10T23:24:29.000Z (over 4 years ago)
• Last Synced: 2024-09-17T12:10:05.294Z (over 1 year ago)
• Language: TypeScript
• Homepage: https://npmjs.com/package/use-typing-headlines
• Size: 246 KB
• Stars: 15
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

          
[![npm version](https://badge.fury.io/js/use-typing-headlines.svg)](https://badge.fury.io/js/use-typing-headlines)

# 💻 useTypingHeadlines

React hook designed to display animated headlines

## Installation

```

npm install use-typing-headlines

```

## Usage

### One headline



```tsx

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

const Component = () => {

  const [headline] = useTypingHeadlines([

    'First you see this',

    'Then you see this',

    'Lastly, this',

  ]);

  return 
{headline}
;

}

```


### Multiple headlines



```tsx

const Component = () => {

  const [headlineOne] = useTypingHeadlines([

    'Peanut Butter',

    'Copy',

    'Barb',

    'Arts',

  ]);

  const [headlineTwo] = useTypingHeadlines([

    'Jelly',

    'Paste',

    'Star',

    'Crafts',

  ]);

  return 


    {headlineOne} &


    {headlineTwo}_

  
;

}

```


### Accessibility (BETA)

```tsx

const Component = () => {

  const [headlineLive, headlineStatic] = useTypingHeadlines([

    'This text will be tranlated for screen readers',

    'Updating one full word at a time ...',

  ]);

  return <>

    


      {headlineLive}

    

    


      {headlineStatic}

    
;

  >;

}

```