Add Typescript support

[maxijonson]

Would be nice to get some typings for this awesome project!

[remorses]

I made a similar package that uses typescript if you want to check it out, it is called baby-i-am-faded

[corysimmons]

In lieu of actual definitions, create react-reveal.d.ts at the root of your project and put declare module 'react-reveal'; in it.

[daniel7777cohen]

Try the following import using require => const Zoom = require('react-reveal/Zoom');

thanks to @yangnana11 https://medium.com/@yangnana11/react-import-react-reveal-7f7d484f6802

[luisgurmendezMLabs]

@daniel7777cohen that doesn't solve the typescript support. It just removes the ts error. A better approach for doing that is creating a .d.ts file for this module. If you just want to get rid of the ts error just define the module as

src/@types/react-reveal/index.d.ts

declare module 'react-reveal' {
  export const Zoom: React.FC;
}

[thomashagstrom]

In lack of TS support (which it really should have!), what u need is a proper definition

// types/react-reveal/index.d.ts
/// <reference types="node" />

/**
 * @typedef RevealProps
 *
 * https://www.react-reveal.com/docs/props/
 */
interface RevealProps {
  /**
   * This prop is used if the revealed element in the transition group or if an element has when, in or spy props. It `true` then the initial reveal animation will be shown. Defaults to `false`. Optional.
   * @property {boolean}
   */
  appear?: boolean;
  /**
   * Sets the origin of the reveal animation to bottom. Defaults to `false`. Optional.
   * @property {boolean}
   */
  bottom?: boolean;
  /**
   * See <a href="https://www.react-reveal.com/docs/cascade/">cascade docs</a>. Defaults to `false`. Optional.
   * @property {boolean}
   */
  cascase?: boolean;
  /**
   * See <a href="https://www.react-reveal.com/docs/when/">collapse docs</a>. Defaults to `false`. Optional.
   *
   * https://www.react-reveal.com/docs/when/
   * @property {boolean}
   */
  collapse?: boolean;
  /**
   * @property {number}
   */
  count?: number;
  /**
   * Delay before the start of reveal animation in milliseconds. Can be handy if several reveals are happening at approximately same time and you want to space them out a bit. Optional.
   * @property {number}
   */
  delay?: number;
  distance?: string;
  /**
   * Duration of the reveal animation in milliseconds. Defaults to 1000 milliseconds. Optional.
   * @property {number}
   */
  duration?: number;
  /**
   * Enables enter animation when the revealed element is in the transition group. Defaults to `coo`. Optional.
   * @property {boolean}
   */
  enter?: boolean;
  /**
   * @property {boolean}
   */
  exit?: boolean;
  /**
   * @property {boolean}
   */
  force?: boolean;
  /**
   * @property {boolean}
   */
  forever?: boolean;
  /**
   * @property {boolean}
   */
  in?: boolean;
  innerRef?: () => void;
  /**
   * Sets the origin of the reveal animation to left. Defaults to `false`. Optional.
   * @property {boolean}
   */
  left?: boolean;
  /**
   * @property {boolean}
   */
  mirror?: boolean;
  /**
   * @property {boolean}
   */
  mountOnEnter?: boolean;
  onReaveal?: () => void;
  /**
   * @property {boolean}
   */
  opposite?: boolean;
  refProp?: string;
  /**
   * Sets the origin of the reveal animation to right. Defaults to `false`. Optional.
   * @property {boolean}
   */
  right?: boolean;
  spy?: unknown;
  /**
   * Applies fadeout effect during the initial load if server side rendering is used. Defaults to `false`. Optional.
   * @property {boolean}
   */
  ssrFadeout?: boolean;
  /**
   * Forcing reveal animation even on the initial ssr loading. If enabled, this option will suppress both flickering and ssrFadeout effect. The unfortunate drawback of this option is that the revealed content will appear hidden to Googlebot and to anyone with javascript switched off. So it will makes sense for images and/or headings which are duplicated elsewhere on the page. Defaults to false. Optional.
   *
   * @property {boolean}
   */
  ssrReveal?: boolean;
  /**
   * @property {number}
   */
  timeout?: number;
  /**
   * Sets the origin of the reveal animation to top. Defaults to `false`. Optional.
   * @property {boolean}
   */
  top?: boolean;
  /**
   * @property {boolean}
   */
  unmountOnExit?: boolean;
  /**
   * @property {number}
   */
  wait?: number;
  /**
   * If this prop evaluates to a truthy value then the element will be revealed when scrolled into a viewport. If the value is falsy then the element will be hidden upon entering a viewport. Disables the initial reveal animation (use appear prop to reenable it). See detailed docs.This prop is `true` by default. Optional.
   * @property {boolean}
   */
  when?: boolean;
}

declare module 'react-reveal/Bounce' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Fade' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Flip' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/LightSpeed' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Roll' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Rotate' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Slide' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Zoom' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Jump' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Flash' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/HeadShake' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Jello' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}
declare module 'react-reveal/Pulse' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/RubberBand' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Shake' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Spin' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Swing' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Tada' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Wobble' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

[yinkakun]

Great work @thomashagstrom
It would be great if you could make this a @types/react-reveal package. If you don't have much time on your side, let me know so I can do it.

A little typo in the RevealProps interface 'cascase' instead of 'cascade'

[lafiosca]

I think the React imports are redundant/unneeded these days, and the "node" types reference seems unnecessary. But thank you so much for sharing this type def file as a launching point!!

[julioflima]

In lack of TS support (which it really should have!), what u need is a proper definition

// types/react-reveal/index.d.ts
/// <reference types="node" />

/**
 * @typedef RevealProps
 *
 * https://www.react-reveal.com/docs/props/
 */
interface RevealProps {
  /**
   * This prop is used if the revealed element in the transition group or if an element has when, in or spy props. It `true` then the initial reveal animation will be shown. Defaults to `false`. Optional.
   * @property {boolean}
   */
  appear?: boolean;
  /**
   * Sets the origin of the reveal animation to bottom. Defaults to `false`. Optional.
   * @property {boolean}
   */
  bottom?: boolean;
  /**
   * See <a href="https://www.react-reveal.com/docs/cascade/">cascade docs</a>. Defaults to `false`. Optional.
   * @property {boolean}
   */
  cascase?: boolean;
  /**
   * See <a href="https://www.react-reveal.com/docs/when/">collapse docs</a>. Defaults to `false`. Optional.
   *
   * https://www.react-reveal.com/docs/when/
   * @property {boolean}
   */
  collapse?: boolean;
  /**
   * @property {number}
   */
  count?: number;
  /**
   * Delay before the start of reveal animation in milliseconds. Can be handy if several reveals are happening at approximately same time and you want to space them out a bit. Optional.
   * @property {number}
   */
  delay?: number;
  distance?: string;
  /**
   * Duration of the reveal animation in milliseconds. Defaults to 1000 milliseconds. Optional.
   * @property {number}
   */
  duration?: number;
  /**
   * Enables enter animation when the revealed element is in the transition group. Defaults to `coo`. Optional.
   * @property {boolean}
   */
  enter?: boolean;
  /**
   * @property {boolean}
   */
  exit?: boolean;
  /**
   * @property {boolean}
   */
  force?: boolean;
  /**
   * @property {boolean}
   */
  forever?: boolean;
  /**
   * @property {boolean}
   */
  in?: boolean;
  innerRef?: () => void;
  /**
   * Sets the origin of the reveal animation to left. Defaults to `false`. Optional.
   * @property {boolean}
   */
  left?: boolean;
  /**
   * @property {boolean}
   */
  mirror?: boolean;
  /**
   * @property {boolean}
   */
  mountOnEnter?: boolean;
  onReaveal?: () => void;
  /**
   * @property {boolean}
   */
  opposite?: boolean;
  refProp?: string;
  /**
   * Sets the origin of the reveal animation to right. Defaults to `false`. Optional.
   * @property {boolean}
   */
  right?: boolean;
  spy?: unknown;
  /**
   * Applies fadeout effect during the initial load if server side rendering is used. Defaults to `false`. Optional.
   * @property {boolean}
   */
  ssrFadeout?: boolean;
  /**
   * Forcing reveal animation even on the initial ssr loading. If enabled, this option will suppress both flickering and ssrFadeout effect. The unfortunate drawback of this option is that the revealed content will appear hidden to Googlebot and to anyone with javascript switched off. So it will makes sense for images and/or headings which are duplicated elsewhere on the page. Defaults to false. Optional.
   *
   * @property {boolean}
   */
  ssrReveal?: boolean;
  /**
   * @property {number}
   */
  timeout?: number;
  /**
   * Sets the origin of the reveal animation to top. Defaults to `false`. Optional.
   * @property {boolean}
   */
  top?: boolean;
  /**
   * @property {boolean}
   */
  unmountOnExit?: boolean;
  /**
   * @property {number}
   */
  wait?: number;
  /**
   * If this prop evaluates to a truthy value then the element will be revealed when scrolled into a viewport. If the value is falsy then the element will be hidden upon entering a viewport. Disables the initial reveal animation (use appear prop to reenable it). See detailed docs.This prop is `true` by default. Optional.
   * @property {boolean}
   */
  when?: boolean;
}

declare module 'react-reveal/Bounce' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Fade' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Flip' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/LightSpeed' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Roll' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Rotate' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Slide' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Zoom' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Jump' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Flash' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/HeadShake' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Jello' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}
declare module 'react-reveal/Pulse' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/RubberBand' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Shake' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Spin' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Swing' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Tada' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Wobble' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

@thomashagstrom thank you a lot.

FIX:

• Remove -> cascase?: boolean;
• Add ->cascade?: boolean;

  Info I:

• Create a file in src/types/react-reveal/index.d.ts
• Inside this file paste the lines quoted above, after this, if you are using ESLINT and Prettier ON TOP OF FILE paste:

  /* eslint-disable react/prefer-stateless-function */
  /* eslint-disable max-classes-per-file */
  /* eslint-disable import/no-duplicates */
  /* eslint-disable prettier/prettier */

• In the same file save it.

  Info II:

• On tsconfig.json add this: "include": ["src", "./types"]
• In the same file save it.

[iyanushow]

Thanks @thomashagstrom @julioflima for this. I noticed that theres no definition for the withReveal function. How can I add that to my project?

[julioflima]

Thanks @thomashagstrom @julioflima for this. I noticed that theres no definition for the withReveal function. How can I add that to my project?

You can produce the type of this function? If yes, you can add to the file that you added.

[XcrossD]

I had to change the type definitions a bit for this error I'm getting in typescript ^4.7.4.

      TS2769: No overload matches this call.
  Overload 1 of 2, '(props: RevealProps | Readonly<RevealProps>): Animation', gave the following error.
    Type '{ children: Element; right: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Animation> & Readonly<RevealProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Animation> & Readonly<RevealProps>'.
  Overload 2 of 2, '(props: RevealProps, context: any): Animation', gave the following error.
    Type '{ children: Element; right: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Animation> & Readonly<RevealProps>'.
      Property 'children' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Animation> & Readonly<RevealProps>'.

It can be solved with PropsWithChildren.

declare module 'react-reveal/Fade' {
  import React, { PropsWithChildren } from 'react';

  class Animation extends React.Component<PropsWithChildren<RevealProps>> {}
  export default Animation;
}

[exchange888m]

Final react-reveal.d.ts file after typo and child element fix:

  /* eslint-disable react/prefer-stateless-function */
  /* eslint-disable max-classes-per-file */
  /* eslint-disable import/no-duplicates */
  /* eslint-disable prettier/prettier */

// types/react-reveal/index.d.ts
/// <reference types="node" />

/**
 * @typedef RevealProps
 *
 * https://www.react-reveal.com/docs/props/
 */
 interface RevealProps {
    children?: JSX.Element | JSX.Element[];
    /**
     * This prop is used if the revealed element in the transition group or if an element has when, in or spy props. It `true` then the initial reveal animation will be shown. Defaults to `false`. Optional.
     * @property {boolean}
     */
    appear?: boolean;
    /**
     * Sets the origin of the reveal animation to bottom. Defaults to `false`. Optional.
     * @property {boolean}
     */
    bottom?: boolean;
    /**
     * See <a href="https://www.react-reveal.com/docs/cascade/">cascade docs</a>. Defaults to `false`. Optional.
     * @property {boolean}
     */
    cascade?: boolean;
    /**
     * See <a href="https://www.react-reveal.com/docs/when/">collapse docs</a>. Defaults to `false`. Optional.
     *
     * https://www.react-reveal.com/docs/when/
     * @property {boolean}
     */
    collapse?: boolean;
    /**
     * @property {number}
     */
    count?: number;
    /**
     * Delay before the start of reveal animation in milliseconds. Can be handy if several reveals are happening at approximately same time and you want to space them out a bit. Optional.
     * @property {number}
     */
    delay?: number;
    distance?: string;
    /**
     * Duration of the reveal animation in milliseconds. Defaults to 1000 milliseconds. Optional.
     * @property {number}
     */
    duration?: number;
    /**
     * Enables enter animation when the revealed element is in the transition group. Defaults to `coo`. Optional.
     * @property {boolean}
     */
    enter?: boolean;
    /**
     * @property {boolean}
     */
    exit?: boolean;
    /**
     * @property {boolean}
     */
    force?: boolean;
    /**
     * @property {boolean}
     */
    forever?: boolean;
    /**
     * @property {boolean}
     */
    in?: boolean;
    innerRef?: () => void;
    /**
     * Sets the origin of the reveal animation to left. Defaults to `false`. Optional.
     * @property {boolean}
     */
    left?: boolean;
    /**
     * @property {boolean}
     */
    mirror?: boolean;
    /**
     * @property {boolean}
     */
    mountOnEnter?: boolean;
    onReaveal?: () => void;
    /**
     * @property {boolean}
     */
    opposite?: boolean;
    refProp?: string;
    /**
     * Sets the origin of the reveal animation to right. Defaults to `false`. Optional.
     * @property {boolean}
     */
    right?: boolean;
    spy?: unknown;
    /**
     * Applies fadeout effect during the initial load if server side rendering is used. Defaults to `false`. Optional.
     * @property {boolean}
     */
    ssrFadeout?: boolean;
    /**
     * Forcing reveal animation even on the initial ssr loading. If enabled, this option will suppress both flickering and ssrFadeout effect. The unfortunate drawback of this option is that the revealed content will appear hidden to Googlebot and to anyone with javascript switched off. So it will makes sense for images and/or headings which are duplicated elsewhere on the page. Defaults to false. Optional.
     *
     * @property {boolean}
     */
    ssrReveal?: boolean;
    /**
     * @property {number}
     */
    timeout?: number;
    /**
     * Sets the origin of the reveal animation to top. Defaults to `false`. Optional.
     * @property {boolean}
     */
    top?: boolean;
    /**
     * @property {boolean}
     */
    unmountOnExit?: boolean;
    /**
     * @property {number}
     */
    wait?: number;
    /**
     * If this prop evaluates to a truthy value then the element will be revealed when scrolled into a viewport. If the value is falsy then the element will be hidden upon entering a viewport. Disables the initial reveal animation (use appear prop to reenable it). See detailed docs.This prop is `true` by default. Optional.
     * @property {boolean}
     */
    when?: boolean;
  }

  declare module 'react-reveal/Bounce' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Fade' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Flip' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/LightSpeed' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Roll' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Rotate' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Slide' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Zoom' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Jump' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Flash' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/HeadShake' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Jello' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }
  declare module 'react-reveal/Pulse' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/RubberBand' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Shake' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Spin' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Swing' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Tada' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

  declare module 'react-reveal/Wobble' {
    import React from 'react';

    class Animation extends React.Component<RevealProps> {}
    export default Animation;
  }

[regisrex]

In lack of TS support (which it really should have!), what u need is a proper definition

// types/react-reveal/index.d.ts
/// <reference types="node" />

/**
 * @typedef RevealProps
 *
 * https://www.react-reveal.com/docs/props/
 */
interface RevealProps {
  /**
   * This prop is used if the revealed element in the transition group or if an element has when, in or spy props. It `true` then the initial reveal animation will be shown. Defaults to `false`. Optional.
   * @property {boolean}
   */
  appear?: boolean;
  /**
   * Sets the origin of the reveal animation to bottom. Defaults to `false`. Optional.
   * @property {boolean}
   */
  bottom?: boolean;
  /**
   * See <a href="https://www.react-reveal.com/docs/cascade/">cascade docs</a>. Defaults to `false`. Optional.
   * @property {boolean}
   */
  cascase?: boolean;
  /**
   * See <a href="https://www.react-reveal.com/docs/when/">collapse docs</a>. Defaults to `false`. Optional.
   *
   * https://www.react-reveal.com/docs/when/
   * @property {boolean}
   */
  collapse?: boolean;
  /**
   * @property {number}
   */
  count?: number;
  /**
   * Delay before the start of reveal animation in milliseconds. Can be handy if several reveals are happening at approximately same time and you want to space them out a bit. Optional.
   * @property {number}
   */
  delay?: number;
  distance?: string;
  /**
   * Duration of the reveal animation in milliseconds. Defaults to 1000 milliseconds. Optional.
   * @property {number}
   */
  duration?: number;
  /**
   * Enables enter animation when the revealed element is in the transition group. Defaults to `coo`. Optional.
   * @property {boolean}
   */
  enter?: boolean;
  /**
   * @property {boolean}
   */
  exit?: boolean;
  /**
   * @property {boolean}
   */
  force?: boolean;
  /**
   * @property {boolean}
   */
  forever?: boolean;
  /**
   * @property {boolean}
   */
  in?: boolean;
  innerRef?: () => void;
  /**
   * Sets the origin of the reveal animation to left. Defaults to `false`. Optional.
   * @property {boolean}
   */
  left?: boolean;
  /**
   * @property {boolean}
   */
  mirror?: boolean;
  /**
   * @property {boolean}
   */
  mountOnEnter?: boolean;
  onReaveal?: () => void;
  /**
   * @property {boolean}
   */
  opposite?: boolean;
  refProp?: string;
  /**
   * Sets the origin of the reveal animation to right. Defaults to `false`. Optional.
   * @property {boolean}
   */
  right?: boolean;
  spy?: unknown;
  /**
   * Applies fadeout effect during the initial load if server side rendering is used. Defaults to `false`. Optional.
   * @property {boolean}
   */
  ssrFadeout?: boolean;
  /**
   * Forcing reveal animation even on the initial ssr loading. If enabled, this option will suppress both flickering and ssrFadeout effect. The unfortunate drawback of this option is that the revealed content will appear hidden to Googlebot and to anyone with javascript switched off. So it will makes sense for images and/or headings which are duplicated elsewhere on the page. Defaults to false. Optional.
   *
   * @property {boolean}
   */
  ssrReveal?: boolean;
  /**
   * @property {number}
   */
  timeout?: number;
  /**
   * Sets the origin of the reveal animation to top. Defaults to `false`. Optional.
   * @property {boolean}
   */
  top?: boolean;
  /**
   * @property {boolean}
   */
  unmountOnExit?: boolean;
  /**
   * @property {number}
   */
  wait?: number;
  /**
   * If this prop evaluates to a truthy value then the element will be revealed when scrolled into a viewport. If the value is falsy then the element will be hidden upon entering a viewport. Disables the initial reveal animation (use appear prop to reenable it). See detailed docs.This prop is `true` by default. Optional.
   * @property {boolean}
   */
  when?: boolean;
}

declare module 'react-reveal/Bounce' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Fade' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Flip' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/LightSpeed' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Roll' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Rotate' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Slide' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Zoom' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Jump' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Flash' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/HeadShake' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Jello' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}
declare module 'react-reveal/Pulse' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/RubberBand' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Shake' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Spin' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Swing' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Tada' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

declare module 'react-reveal/Wobble' {
  import React from 'react';

  class Animation extends React.Component<RevealProps> {}
  export default Animation;
}

@thomashagstrom thank you a lot.

FIX:

• Remove -> cascase?: boolean;
• Add ->cascade?: boolean;

Info I:

• Create a file in src/types/react-reveal/index.d.ts
• Inside this file paste the lines quoted above, after this, if you are using ESLINT and Prettier ON TOP OF FILE paste:

  /* eslint-disable react/prefer-stateless-function */
  /* eslint-disable max-classes-per-file */
  /* eslint-disable import/no-duplicates */
  /* eslint-disable prettier/prettier */

• In the same file save it.

Info II:

• On tsconfig.json add this: "include": ["src", "./types"]
• In the same file save it.

Doesn't RevealProps contain children prop ? @julioflima

[ghbishal]

@ndzhwr I created // types/react-reveal/index.d.ts and added all the files and I created file called Header.tsx and used but still i am getting the error

Could not find a declaration file for module 'react-reveal'. '/Users/alex/githubProjects/everestGroup/node_modules/react-reveal/index.js' implicitly has an 'any' type. Trynpm i --save-dev @types/react-revealif it exists or add a new declaration (.d.ts) file containingdeclare module 'react-reveal';``

. could someone help me ?

// From react Reveal
import { Zoom } from "react-reveal";
import "./header.scss";

// From Materail UI
import LocalDiningIcon from "@mui/icons-material/LocalDining";

const Header = ({ title, subTitle }) => {
  return (
    <Zoom delay={40} duration={2000}>
      <div className="slogan">
        <h1>{title}</h1>
        <h2>{subTitle}</h2>
        <div className="divider">
          <span className="left"></span>
          <LocalDiningIcon className="spoonFork" />
          <span className="right"></span>
        </div>
      </div>
    </Zoom>
  );
};

export default Header;

[demon1094]

@ndzhwr I created // types/react-reveal/index.d.ts and added all the files and I created file called Header.tsx and used but still i am getting the error

Could not find a declaration file for module 'react-reveal'. '/Users/alex/githubProjects/everestGroup/node_modules/react-reveal/index.js' implicitly has an 'any' type. Trynpm i --save-dev @types/react-revealif it exists or add a new declaration (.d.ts) file containingdeclare module 'react-reveal';``

. could someone help me ?

// From react Reveal
import { Zoom } from "react-reveal";
import "./header.scss";

// From Materail UI
import LocalDiningIcon from "@mui/icons-material/LocalDining";

const Header = ({ title, subTitle }) => {
  return (
    <Zoom delay={40} duration={2000}>
      <div className="slogan">
        <h1>{title}</h1>
        <h2>{subTitle}</h2>
        <div className="divider">
          <span className="left"></span>
          <LocalDiningIcon className="spoonFork" />
          <span className="right"></span>
        </div>
      </div>
    </Zoom>
  );
};

export default Header;

@ndzhwr I created // types/react-reveal/index.d.ts and added all the files and I created file called Header.tsx and used but still i am getting the error

Could not find a declaration file for module 'react-reveal'. '/Users/alex/githubProjects/everestGroup/node_modules/react-reveal/index.js' implicitly has an 'any' type. Trynpm i --save-dev @types/react-revealif it exists or add a new declaration (.d.ts) file containingdeclare module 'react-reveal';``

. could someone help me ?

// From react Reveal
import { Zoom } from "react-reveal";
import "./header.scss";

// From Materail UI
import LocalDiningIcon from "@mui/icons-material/LocalDining";

const Header = ({ title, subTitle }) => {
  return (
    <Zoom delay={40} duration={2000}>
      <div className="slogan">
        <h1>{title}</h1>
        <h2>{subTitle}</h2>
        <div className="divider">
          <span className="left"></span>
          <LocalDiningIcon className="spoonFork" />
          <span className="right"></span>
        </div>
      </div>
    </Zoom>
  );
};

export default Header;

I managed to find a solution.

All you have to do is add "declare module 'react-reveal';" in the index.d.ts file in the @types/react-reveal folder