mattboldt / typed.js

A JavaScript Typing Animation Library
http://www.mattboldt.com/demos/typed-js/
MIT License
15.59k stars 1.76k forks source link

How I can use in React.Components #223

Closed DastanSE closed 7 years ago

DastanSE commented 7 years ago

I write code in react and there is always error

Uncaught TypeError: Cannot read property 'fn' of undefined
    at typed.min.js:1
    at Object.<anonymous> (typed.min.js:1)
    at __webpack_require__ (bootstrap 3cb3a0b…:555)
    at fn (bootstrap 3cb3a0b…:86)
    at Object.<anonymous> (HomePage1.js:5)
    at __webpack_require__ (bootstrap 3cb3a0b…:555)
    at fn (bootstrap 3cb3a0b…:86)
    at Object.<anonymous> (HomePage.js:6)
    at __webpack_require__ (bootstrap 3cb3a0b…:555)
    at fn (bootstrap 3cb3a0b…:86)
import React from 'react';

import {Router, browserHistory, Link} from 'react-router';
import $ from 'jquery';
import typed from 'typed.js';
import stringTest from '../../strings/en.json';

class Typed extends React.Component { 

    componentDidMount() {

        window.addEventListener('resize', () => this.forceUpdate())
        const array = JSON.parse(stringTest.slogans);

        $(".typed").typed({
            strings: array,
            typeSpeed: 50,
            // time before typing starts
            startDelay: 1000,
            // backspacing speed
            backSpeed: 50,
            // shuffle the strings
            shuffle: false,
            // time before backspacing
            backDelay: 500,
            // loop
            loop: true,
            // false = infinite
            loopCount: false,
            // show cursor
            showCursor: true,
            // character for cursor
            cursorChar: '|'
        });
       render() {
       return(
       <span className="typed"></span>
        )
      }
export default Typed;
DastanSE commented 7 years ago

https://github.com/luisvinicius167/ityped/tree/f0b028abb6aea4a93400d35f9ba8aa6cc068fcf2

I found the answer to own question))

DastanSE commented 7 years ago

close