Miss any of our Open RFC calls?Watch the recordings here! »

jumping-letters

1.3.0 • Public • Published

🔥 Jumping Letters! 🔥

A React component for making text jump around on the page

Check out the Demo

Installing

You can install jumping-letters with NPM.

npm i jumping-letters --save

Or find more info on it here

Usage

// To have jumping letters in your react app, first import the component:
import { JumpingLetters } from 'jumping-letters';
// Or if you're not using babel you can require the component:
var JumpingLetters = require('jumping-letters');
 
// ...
// The JumpingLetters component takes four props:
//
// Phrase is the phrase you wish to output
//
// Strength is the number of pixels each letter can jump in pixels
// (remember, this is both negative and positive pixels so it will be able to jump 4 pixels)
//
// Speed is the number of milliseconds between each re-render
// (the higher the number, the slower it is)
//
// Smooth is a boolean which adds transitions between renders
<JumpingLetters phrase="Hello World!" strength="2" speed="120" smooth />
 
// If you want to have multiple lines you can split the word up using the "back slash" character ( \ )
// e.g.
<JumpingLetters phrase="Seperate\Lines" strength="5" speed="150" />
// ...

Contributing

Everyone is welcome to contribute, just fork the repo, do your bit and submit a pull request :)

Versioning

I use SemVer for versioning. For the versions available, see the tags on this repository.

Authors

Install

npm i jumping-letters

DownloadsWeekly Downloads

3

Version

1.3.0

License

ISC

Last publish

Collaborators

  • avatar