Update react-typing-animation (#42322)

* Added React Native Share Extension

* Fixed Linting Issues

Fixed linting issues, added tests.

* Fixed other linting issues

Data returns a promise.

* Removed Public from state

Removed public from state.

* Added react-typing-animation

Added react-typing-animation.

* Updated react-typing-animation

Updated the react-typing-animation definitions
with the extra components such as delay, backspace.
This commit is contained in:
Haseeb Majid 2020-02-13 00:17:05 +00:00 committed by GitHub
parent 4701ec707d
commit 028c46f833
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 2 deletions

View File

@ -1,5 +1,5 @@
// Type definitions for react-typing-animation 1.6
// Project: https://adamjking3.github.io/react-typing-animation-example/
// Project: https://github.com/notadamking/react-typing-animation#readme
// Definitions by: Haseeb Majid <https://github.com/hmajid2301>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
@ -11,7 +11,7 @@ export interface TypingProps {
className?: string;
cursorClassName?: string;
cursor?: React.ReactNode;
hideCurson?: boolean;
hideCursor?: boolean;
speed?: number;
startDelay?: number;
loop?: boolean;
@ -21,6 +21,32 @@ export interface TypingProps {
onFinishedType?: () => {};
}
declare namespace Typing {
interface BackspaceProperties {
count?: number;
delay?: number;
speed?: number;
}
class Backspace extends Component<BackspaceProperties> {}
interface DelayProperties {
ms: number;
}
class Delay extends Component<DelayProperties> {}
interface SpeedProperties {
ms: number;
}
class Speed extends Component<SpeedProperties> {}
interface ResetProperties {
count?: number;
delay?: number;
speed?: number;
}
class Reset extends Component<ResetProperties> {}
}
declare class Typing extends Component<TypingProps> {}
export default Typing;

View File

@ -7,3 +7,36 @@ const AnimatedTypingComponent = () => (
<span>This span will get typed.</span>
</Typing>
);
const AnimatedBackspaceComponent = () => (
<Typing>
<span>This span will get typed, then erased.</span>
<Typing.Backspace count={20} />
</Typing>
);
const AnimatedDelayComponent = () => (
<Typing>
<div>
There will be a 1000ms delay here,
<Typing.Delay ms={1000} />
then this will be typed.
</div>
</Typing>
);
const AnimatedSpeedComponent = () => (
<Typing speed={50}>
This line will be typed at 50ms/character,
<Typing.Speed ms={200} />
then this will be typed at 200ms/character.
</Typing>
);
const AnimatedResetComponent = () => (
<Typing>
<span>This line will stay.</span>
<span>This line will get instantly removed after a 500 ms delay</span>
<Typing.Reset count={1} delay={500} />
</Typing>
);