35

GitHub - yershalom/react-wordart: The nostalgic WordArt we know just in react

 5 years ago
source link: https://github.com/yershalom/react-wordart
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

README.md

react-wordart (demo)

The nostalgic WordArt we know just in react - Hackernoon Post

NPM JavaScript Style Guide Build Status

css-wordart

Based on my css-wordart repo

Install

npm install --save react-wordart

Usage

import React, { Component } from 'react'

import WordArt from 'react-wordart'

class Example extends Component {
  render () {
    return (
      <WordArt text='I Love WordArt' theme={`rainbow`} fontSize={100} />
    )
  }
}

Properties

Property Type Required Default value Description text string yes

theme string no rainbow WordArt theme. fontSize number no 50

Available Themes

Theme Output rainbow screen shot 2019-01-31 at 18 19 05 blues screen shot 2019-01-31 at 18 19 09 superhero screen shot 2019-01-31 at 18 19 14 radial screen shot 2019-01-31 at 18 19 18 tilt screen shot 2019-01-31 at 18 19 21 purple screen shot 2019-01-31 at 18 19 24 horizon screen shot 2019-01-31 at 18 19 27 italicOutline screen shot 2019-01-31 at 18 19 31 slate screen shot 2019-01-31 at 18 19 34

Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# (in another tab)
cd example
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

License

MIT © yershalom

This module was bootstrapped with create-react-library.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK