Giter Site home page Giter Site logo

pierrevdk / typewriterjs Goto Github PK

View Code? Open in Web Editor NEW

This project forked from tameemsafi/typewriterjs

0.0 1.0 0.0 1002 KB

A simple yet powerful native javascript plugin for a cool typewriter effect.

Home Page: https://www.npmjs.com/package/typewriter-effect

License: MIT License

JavaScript 100.00%

typewriterjs's Introduction

TypewriterJS v2

CircleCI

NPM Repository JSFiddle Example Emoji Example

CDN

You can use the CDN version of this plugin for fast and easy setup.

<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>

Installation

You can install Typewriterjs with just one command and you're good to go

# with npm
npm i typewriter-effect

# with yarn
yarn add typewriter-effect

Core

This include the core typewriter library, which can be used directly through the API.

See examples in the 'examples' folder.

import Typewriter from 'typewriter-effect/dist/core';

new Typewriter('#typewriter', {
  strings: ['Hello', 'World'],
  autoStart: true,
});

Options

Name Type Default value Description
strings String or Array null Strings to type out when using autoStart option
cursor String Pipe character String value to use as the cursor.
delay 'natural' or Number 'natural' The delay between each key when typing.
deleteSpeed 'natural' or Number 'natural' The delay between deleting each character.
loop Boolean false Whether to keep looping or not.
autoStart Boolean false Whether to autostart typing strings or not. You are required to provide strings option.
pauseFor Number 1500 The pause duration after a string is typed when using autostart mode
devMode Boolean false Whether or not to display console logs.
skipAddStyles Boolean Skip adding default typewriter css styles.
wrapperClassName String 'Typewriter__wrapper' Class name for the wrapper element.
cursorClassName String 'Typewriter__cursor' Class name for the cursor element.
stringSplitter Function String splitter function, can be used to split emoji's
onCreateTextNode Function null Callback function to replace the internal method which creates a text node for the character before adding it to the DOM. If you return null, then it will not add anything to the DOM and so it is up to you to handle it.
onRemoveNode Function null Callback function when a node is about to be removed. First param will be an object { node: HTMLNode, charater: string }

Methods

All methods can be chained together.

Name Params Description
start - Start the typewriter effect.
stop - Stop the typewriter effect.
pauseFor ms Time to pause for in milliseconds Pause for milliseconds
typeString string String to type out, it can contain HTML tags Type out a string using the typewriter effect.
pasteString string String to paste out, it can contain HTML tags Paste out a string.
deleteAll speed Speed to delete all visibles nodes, can be number or 'natural' Delete everything that is visible inside of the typewriter wrapper element.
deleteChars amount Number of characters Delete and amount of characters, starting at the end of the visible string.
callFunction cb Callback, thisArg this Object to bind to the callback function Call a callback function. The first parameter to the callback elements which contains all DOM nodes used in the typewriter effect.
changeDeleteSpeed speed Number or 'natural' The speed at which to delete the characters, lower number is faster.
changeDelay delay Number or 'natural' Change the delay when typing out each character

Examples

Basic example

var app = document.getElementById('app');

var typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
});

typewriter
  .pauseFor(2500)
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .deleteChars(10)
  .typeString('<strong>JS</strong> plugin for a cool typewriter effect and ')
  .typeString('<strong>only <span style="color: #27ae60;">5kb</span> Gzipped!</strong>')
  .pauseFor(1000)
  .start();

Custom text node creator using callback

var app = document.getElementById('app');

var customNodeCreator = function(character) {
  return document.createTextNode(character);
}

var typewriter = new Typewriter(app, {
  loop: true,
  delay: 75,
  onCreateTextNode: customNodeCreator,
});

typewriter
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .start();

Custom handling text insert using input placeholder

var input = document.getElementById('input')

var customNodeCreator = function(character) {
  // Add character to input placeholder
  input.placeholder = input.placeholder + character;

  // Return null to skip internal adding of dom node
  return null;
}

var onRemoveNode = function({ character }) {
  if(input.placeholder) {
    // Remove last character from input placeholder
    input.placeholder = input.placeholder.slice(0, -1)
  }
}

var typewriter = new Typewriter(null, {
  loop: true,
  delay: 75,
  onCreateTextNode: customNodeCreator,
  onRemoveNode: onRemoveNode,
});

typewriter
  .typeString('A simple yet powerful native javascript')
  .pauseFor(300)
  .start();

React

This includes a React component which can be used within your project. You can pass in a onInit function which will be called with the instance of the typewriter so you can use the typewriter core API.

import Typewriter from 'typewriter-effect';

<Typewriter
  onInit={(typewriter) => {
    typewriter.typeString('Hello World!')
      .callFunction(() => {
        console.log('String typed out!');
      })
      .pauseFor(2500)
      .deleteAll()
      .callFunction(() => {
        console.log('All strings were deleted');
      })
      .start();
  }}
/>

Alternatively you can also pass in options to use auto play and looping for example:

import Typewriter from 'typewriter-effect';

<Typewriter
  options={{
    strings: ['Hello', 'World'],
    autoStart: true,
    loop: true,
  }}
/>

typewriterjs's People

Contributors

adamkdean avatar asadakbar avatar benjithaimmortal avatar dependabot[bot] avatar dishcandanty avatar dtslvr avatar eihabkhan avatar etienne-martin avatar luizeboli avatar natterstefan avatar pierrevdk avatar praaatik avatar realgs avatar seanblonien avatar sirodoht avatar tameemsafi avatar y3pio avatar zpalmtree avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.