react-native-typewritter v1.0.0

React Native Typewriter

A simple component for adding a nice typewriter effect to your react native project.

Install

npm

npm i react-native-typewriter

Yarn

yarn add react-native-typewriter

Usage

There are two ways to use Typewriter:

1. Component

import React from 'react'
import { View } from 'react-native'
import { Typewriter } from 'react-native-typewriter'

const MyComponent = () => {
  return (
    <View>
      <Typewriter {/* Props */} />
    </View>
  )
}

Component Props

Usage Example

import React from 'react'
import { Typewriter } from 'react-native-typewriter'

const MyComponent = () => {

  const handleType = (count: number) => {
    // access word count number
    console.log(count)}
  }

  const handleDone = () => {
    console.log(`Done after 5 loops!`)
  }

  return (
    <View>
      <Typewriter
        words={['Eat', 'Sleep', 'Code', 'Repeat!']}
        loop={5}
        showCursor={true}
        cursorStyle='_'
        typeSpeed={70}
        deleteSpeed={50}
        delaySpeed={1000}
        onLoopDone={handleDone}
        onType={handleType}
      />
    </View>
  )
}

2. Hook

Hook returns text along with some useful flags:

import React from 'react';
import { View, Text } from 'react-native';
import { useTypewriter } from 'react-native-typewriter';

const MyComponent = () => {
  /**
   * @returns
   * text: [string] typed text
   * NEW helper: {} helper flags
   */
  const [text, helper] = useTypewriter({
    /* Config */
  });

  /* Hook helper */
  const { isType, isDelete, isDelay, isDone } = helper;

  return (
    <View>
      <Text>{text}</Text>
    </View>
  );
};

Hook Config

Hook Usage Example

import React from 'react';
import { View, Text } from 'react-native';
import { useTypewriter } from 'react-native-typewriter';

const MyComponent = () => {
  const [text] = useTypewriter({
    words: ['Hello', 'From', 'Typewriter', 'Hook!'],
    loop: 0,
  });

  return (
    <View>
      <Text>{text}</Text>
    </View>
  );
};

License

MIT