react-telescopic-text
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

telescopic-text

React component for an implementation of telescopic text

NPM JavaScript Style Guide

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:

Argument Type Default Description Example
color string aqua A string to change the color of the highlight used for the text black
className object or string none A style object or string (depending on what you're using) heading
fadeInSpeed number 2000 A number (in ms) that corresponds to the fade in speed of the nested text that appears after clicking on an element 4000

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-telescopic-text

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

16.2 kB

Total Files

10

Last publish

Collaborators

  • zhaovan8