# react-telescopic-text

> React component for an implementation of telescopic text

Latest version **1.0.0** (published 2023-05-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-telescopic-text
pnpm add react-telescopic-text
yarn add react-telescopic-text
bun add react-telescopic-text
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2023-05-17 |
| First published | 2023-05-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 15.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | zhaovan |
| Maintainers | zhaovan8 |

## Links

- npm: https://www.npmjs.com/package/react-telescopic-text
- Repository: https://github.com/zhaovan/telescopic-text
- Homepage: https://github.com/zhaovan/telescopic-text#readme
- Issues: https://github.com/zhaovan/telescopic-text/issues
- npm.io page: https://npm.io/package/react-telescopic-text

## Recent versions

- 1.0.0 (latest) — 2023-05-17

## README

# telescopic-text

> React component for an implementation of telescopic text

[![NPM](https://img.shields.io/npm/v/telescopic-text.svg)](https://www.npmjs.com/package/telescopic-text) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

Telescopic Text is a lightweight react component, which draws inspiration from [this site](https://www.telescopictext.org/), 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

```bash
npm install --save telescopic-text
```

or

```bash
yarn add telescopic-text
```

## Usage

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

```tsx
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](https://github.com/zhaovan)

---
_Source: https://npm.io/package/react-telescopic-text · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._