react-typed
A react wrapper for typed.js
Installation
yarn add react-typed
#or
npm install react-typed --saveExamples
import React,{ Component } from 'react';
import { render } from 'react-dom';
import Typed from 'react-typed';
class MyComponent extends Component {
render() {
return (
<div>
<Typed
strings={['Here you can find anything']}
typeSpeed={40}
/>
<br/>
<Typed
strings={[
'Search for products',
'Search for categories',
'Search for brands']}
typeSpeed={40}
backSpeed={50}
attr="placeholder"
loop >
<input type="text"/>
</Typed>
</div>
);
}
}
render(
<MyComponent/>,
document.getElementById('app'),
);Using typed start, stop, toggle, destroy, reset functions
import React,{ Component } from 'react';
import { render } from 'react-dom';
import Typed from 'react-typed';
class MyComponent extends Component {
render() {
return (
<div>
<Button onClick={this.typed.start()}>Start</Button>
<Button onClick={this.typed.stop()}>Stop</Button>
<Button onClick={this.typed.toggle()}>Toggle</Button>
<Button onClick={this.typed.destroy()}>Destroy</Button>
<Button onClick={this.typed.reset()}>Reset</Button>
<Typed
typedRef={(typed) => { this.typed = typed; }}
strings={['Here you can find anything']}
typeSpeed={40}
/>
</div>
);
}
}
render(
<MyComponent/>,
document.getElementById('app'),
);for blinking cursor import 'react-typed/dist/animatedCursor.css';
Documentation
React-typed supports all official options that you can find here. 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 |