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'),
);

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'),
);