diff --git a/README.md b/README.md index 0f3cda4..ed162c0 100644 --- a/README.md +++ b/README.md @@ -4,12 +4,9 @@ --- - [Installation](#installation) -[Examples](http://ssbeefeater.github.io/react-typed) - -[Documentation](#documentation) +[Docs & Examples](http://ssbeefeater.github.io/react-typed) --- @@ -22,92 +19,57 @@ yarn add react-typed #or npm install react-typed --save ``` + --- + #### Examples ```javascript -import React,{ Component } from 'react'; -import { render } from 'react-dom'; -import Typed from 'react-typed'; - -class MyComponent extends Component { - render() { - return ( -
- -
- - - - -
- ); - } -} - -render( - , - document.getElementById('app'), +import { ReactTyped } from "react-typed"; + +const MyComponent = () => ( +
+ +
+ + + + +
); - ``` ###### Using typed start, stop, toggle, destroy, reset functions + ```javascript -import React,{ Component } from 'react'; -import { render } from 'react-dom'; -import Typed from 'react-typed'; - -class MyComponent extends Component { - render() { - return ( -
- - - - - - { this.typed = typed; }} - strings={['Here you can find anything']} - typeSpeed={40} - /> -
- ); - } +import { ReactTyped,Typed } from "react-typed"; + +const MyComponent { + const [typed,setTyped] = React.useState() + + return ( +
+ + + + + + +
+ ) } - -render( - , - document.getElementById('app'), -); - ``` - -for blinking cursor ```import 'react-typed/dist/animatedCursor.css';``` - -#### Documentation - - -React-typed 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 |