react-reveal icon indicating copy to clipboard operation
react-reveal copied to clipboard

Published 20 hours ago • verified publisher icon rnosov

Add Typescript support

Open maxijonson opened this issue 5 years ago • 15 comments

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

maxijonson avatar Mar 16 '19 01:03 maxijonson

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

remorses avatar Apr 18 '20 12:04 remorses

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

corysimmons avatar Apr 27 '20 05:04 corysimmons

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

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

daniel7777cohen avatar May 12 '20 09:05 daniel7777cohen

@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;
}

luisgurmendezMLabs avatar Jan 29 '21 15:01 luisgurmendezMLabs

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 avatar Jul 25 '21 18:07 thomashagstrom

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'

yinkakun avatar Aug 26 '21 09:08 yinkakun

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!!

lafiosca avatar Sep 29 '21 16:09 lafiosca

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.

julioflima avatar Apr 24 '22 11:04 julioflima

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

iyanushow avatar Apr 30 '22 05:04 iyanushow

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.

julioflima avatar May 01 '22 00:05 julioflima

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;
}

XcrossD avatar Aug 19 '22 16:08 XcrossD

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;
  }

exchange888m avatar Dec 08 '22 06:12 exchange888m

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

regisrex avatar Apr 26 '23 13:04 regisrex

@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. Try npm 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;

ghbishal avatar May 09 '23 09:05 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. Try npm 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. Try npm 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

demon1094 avatar May 12 '23 17:05 demon1094