maxeth / react-type-animation

A React typewriter animation based on typical with extended functionality and customization.
https://react-type-animation.netlify.app/
MIT License
353 stars 25 forks source link

Add typescript support #25

Closed Nienormalny closed 10 months ago

Nienormalny commented 1 year ago

Could you please add export to all your types in dist -> index.d.ts? It will be helpfull for typescript projects 👍

Have a great day and thank you for this project!

maxeth commented 1 year ago

After npm install react-type-animation@3.1.0 you should be able to import the important types/interfaces like this

import { TypeAnimationProps,Speed,GranularSpeed,Sequence,Wrapper } from 'react-type-animation/dist/esm/components/TypeAnimation/index.types';

Does it work and is this what you were looking for?

impact-ls commented 1 year ago

Hi @maxeth, I imported the 3.1.0 version to my project, and the only exported Type is the TypeAnimation component. Below is the content of index.d.ts.

/// <reference types="react" />
import React$1 from 'react';

interface TypeAnimationProps extends Props {
    ref?: React.Ref<HTMLElementTagNameMap[Wrapper]>;
}
interface Props {
    sequence: Sequence;
    repeat?: number;
    wrapper?: Wrapper;
    cursor?: boolean;
    speed?: Speed | GranularSpeed;
    deletionSpeed?: Speed | GranularSpeed;
    omitDeletionAnimation?: boolean;
    preRenderFirstString?: boolean;
}
type GranularSpeed = {
    type: 'keyStrokeDelayInMs';
    value: number;
};
type Speed = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99;
type Wrapper = 'p' | 'div' | 'span' | 'strong' | 'a' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'b';
type Sequence = Array<SequenceElement>;
type SequenceElement = string | number | ((element: HTMLElement | null) => void | Promise<void>);

declare const _default: React$1.MemoExoticComponent<React$1.ForwardRefExoticComponent<Pick<TypeAnimationProps & React$1.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>, "sequence" | "repeat" | "speed" | "deletionSpeed" | "omitDeletionAnimation" | "preRenderFirstString" | "wrapper" | "cursor" | keyof React$1.HTMLAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>> & React$1.RefAttributes<HTMLParagraphElement | HTMLElement | HTMLDivElement | HTMLSpanElement | HTMLAnchorElement | HTMLHeadingElement>>>;

export { _default as TypeAnimation };

image

I managed to get the props using

export type TypeAnimationProps = typeof TypeAnimation extends React.ComponentType<infer P> ? P : never;
maxeth commented 1 year ago

@impact-ls They aren't exported in react-type-animation/dist/index.d.ts but in react-type-animation/dist/esm/components/TypeAnimation/index.types as I mentioned.

Screenshot 2023-06-24 at 11 26 26

I can't get them to be exported directly in dist/index.d.ts with rollup for some reason. If you know how to do it, feel free to make a merge request.

impact-ls commented 1 year ago

Ah, I see, I missed the different import path in your reply. It does work the way you mentioned.

Unfortunately, I do not have the knowledge to solve the direct export issue.