https://github.com/kxxt/react-typed-component

A react wrapper for typed.js. Maintained fork of https://github.com/ssbeefeater/react-typed
https://github.com/kxxt/react-typed-component

react react-typed typed-js

Last synced: 9 months ago
JSON representation

A react wrapper for typed.js. Maintained fork of https://github.com/ssbeefeater/react-typed

• Host: GitHub
• URL: https://github.com/kxxt/react-typed-component
• Owner: kxxt
• License: mit
• Created: 2022-02-15T00:17:54.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2023-05-27T02:31:01.000Z (over 2 years ago)
• Last Synced: 2025-03-04T04:34:57.283Z (10 months ago)
• Topics: react, react-typed, typed-js
• Language: JavaScript
• Homepage: http://kxxt.github.io/react-typed-component
• Size: 7.77 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-typed-component

[![GitHub issues](https://img.shields.io/github/issues/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/issues)

[![GitHub forks](https://img.shields.io/github/forks/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/network)

[![GitHub stars](https://img.shields.io/github/stars/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/stargazers)

[![GitHub license](https://img.shields.io/github/license/kxxt/react-typed-component)](https://github.com/kxxt/react-typed-component/blob/master/LICENSE)

A react wrapper for [typed.js](https://github.com/mattboldt/typed.js)

This is a maintained fork of [react-typed](https://github.com/ssbeefeater/react-typed). 

I'm quite new to maintain a npm package. If there are bugs, please open an issue in this repo.

Live demo (Storybook): https://kxxt.github.io/react-typed-component

## Installation

Install with [yarn](https://yarnpkg.com) or [npm](https://www.npmjs.com/)

```sh

yarn add react-typed-component

        #or

npm i react-typed-component

```

## Examples

### A basic example

```jsx

import ReactTyped from "react-typed-component";

const MyComponent = () => (

  


    

    


    

        

      

  

);

```


### Using typed start, stop, toggle, destroy, reset functions

```jsx

import ReactTyped from "react-typed-component";

const MyComponent = () => {

  const typed = useRef(null);

  return (


     typed.current.start()}>Start

     typed.current.stop()}>Stop

     typed.current.toggle()}>Toggle

     typed.current.destroy()}>Destroy

     typed.current.reset()}>Reset

    


     {

          typed.current = typedI;

        }}

        strings={["Here you can find hardware", "Here you can find software", "Here you can find net tools",]}

        typeSpeed={40}

    />

  
);

}

```


for blinking cursor `import 'react-typed-component/dist/animatedCursor.css';`

## Documentation

`react-typed-component` supports all official options that you can find [here](http://www.mattboldt.com/typed.js/docs/).

But also supports some extra props:

| propType          | required | default | description                                      |

| ----------------- | -------- | ------- | ------------------------------------------------ |

| style(object)     | no       | -       | styles for the outer element                     |

| className(string) | no       | -       | class name for the outer element                 |

| children(object)  | no       | -       | the element to wrap                              |

| typedRef(func)    | no       | -       | typedRef(self: Typed) returns the Typed instance |

| stopped(bool)     | no       | -       | initialize in stopped state                      |

## Credits

Thanks to @ssbeefeater for creating the original [react-typed](https://github.com/ssbeefeater/react-typed).

Thanks to all contributers of [typed.js](https://github.com/mattboldt/typed.js).