• Version 3.5.1
  • Published
  • 492 kB
  • No dependencies
  • MIT license


npm i react-parallax
yarn add react-parallax
pnpm add react-parallax


A React Component for parallax effect working in client-side and server-side rendering environment



class Background

class Background extends React.Component<BackgroundProps, {}> {}

    class Parallax

    class Parallax extends React.Component<ParallaxProps, ParallaxState> {}


      interface SplitChildrenResultType

      interface SplitChildrenResultType {}

        property bgChildren

        bgChildren: Array<ReactNode>;

          property children

          children: Array<ReactNode>;

            interface StyleObjectType

            interface StyleObjectType {}

              index signature

              [key: string]: string;

                Type Aliases

                type BackgroundProps

                type BackgroundProps = {
                className?: string;
                children?: React.ReactNode;

                  type BgImageProp

                  type BgImageProp = string;

                    type BgImageSizesProp

                    type BgImageSizesProp = string;

                      type BgImageSrcSetProp

                      type BgImageSrcSetProp = string;

                        type BlurProp

                        type BlurProp = number | DynamicBlurProp;

                          type DynamicBlurProp

                          type DynamicBlurProp = { min: number; max: number };

                            type ParallaxChildrenProps

                            type ParallaxChildrenProps = {
                            className?: string;
                            children?: React.ReactNode;
                            onMount(node: HTMLDivElement): void;

                              type ParallaxProps

                              type ParallaxProps = {
                              bgClassName?: string;
                              bgImage?: BgImageProp;
                              bgImageAlt?: string;
                              bgImageSizes?: BgImageSizesProp;
                              bgImageSrcSet?: BgImageSrcSetProp;
                              bgImageStyle?: { [key: string]: any };
                              onLoad?: (event: Event) => void;
                              bgStyle?: { [key: string]: any };
                              blur?: BlurProp;
                              children?: React.ReactNode;
                              className?: string;
                              contentClassName?: string;
                              disabled?: boolean;
                              parent?: HTMLElement;
                              renderLayer?: (percentage: number) => any;
                              strength?: number;
                              style?: { [key: string]: any };
                              lazy?: boolean;

                                Package Files (1)

                                Dependencies (0)

                                No dependencies.

                                Dev Dependencies (42)

                                Peer Dependencies (2)


                                To add a badge like this badgeto your package's README, use the codes available below.

                                You may also use to create a custom badge linking to

                                • Markdown
                                • HTML
                                  <a href=""><img src="" alt=""></a>