CODEWITHSUNDEEP
javascriptreactjs
rbazzle
rbazzle

Reputation: 33

How can I use react-typed within a functional component along with refs?

I am trying to convert this example code from https://github.com/ssbeefeater/react-typed into a functional component rather than a class component. This is what i'm trying to convert but I can't figure out how to reference typedRef and the methods like start() and reset(). Some guidance would be much appreciated.

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

Upvotes: 0

Views: 121

Answers (1)

Dark Matter
Dark Matter

Reputation: 489

You can use Refs

import React, { useRef } from 'react';

Put this inside your function const typed = useRef(null)

Inside your Typed component typedRef={typed}

Call the methods like this <Button onClick={() => typed.start()}>Start</Button>

Upvotes: 1

Related Questions