react-telescopic-text v1.0.0

telescopic-text

React component for an implementation of telescopic text

Telescopic Text is a lightweight react component, which draws inspiration from this site, as a method to investigate playing with words in a sentence structure. This project was built in conjunction with a few other projects as a series of tools for making a more poetic web.

Install

npm install --save telescopic-text

or

yarn add telescopic-text

Usage

You need to import both the css file and package like so:

import React, { Component } from 'react'

import { TelescopicText } from 'telescopic-text'
import 'telescopic-text/dist/index.css'

class Example extends Component {
  render() {
    return <p>>Here is some <TelescopicText className="heading" fadeInSpeed={2000} color="aquamarine">text.<TelescopicText>more words that should be embellished on.</TelescopicText></TelescopicText></p>
  }
}

From here, the <TelescopicText> component can be nested infinitely many times, to create the corresponding branching tree.

Arguments

TelescopicText has three main props:

Future Work

Some kind of tree visualization / drag and drop as a way of interacting in a debugging manner. I think given the visual nature of this, it would benefit from having this.

License

MIT © zhaovan