react-scroll-up-button

    1.6.4 • Public • Published

    npm version License Demo Build Status Coverage Status

    react-scroll-up-button

    React Component for a fixed scroll to top button. The button can use the default button, or can be customized to look like any button you want. The component contains all the code neccassary to scroll to the top of the page (Or desired position) Utilizing Easing effects.

    I am also adding many different style buttons that you can copy and paste into this component to quickly acheive a style you can appreciate and fits your websites look and feel.

    Demo

    https://react-scroll-up-button.com

    Install

    npm install react-scroll-up-button

    Usage

    Default Button: default_button

    import React from "react";
    import ScrollUpButton from "react-scroll-up-button"; //Add this line Here
     
    export default class Index extends React.Component {
        render() {
            return (
                <div>
                    <ScrollUpButton />
                    //This is all you need to get the default view working
                </div>
            );
        }
    }
     

    Setting Custom Classes to the default button. This will apply the class names you specify to the scroll-up-button.

        <ScrollUpButton ContainerClassName="MyOverRideClass" TransitionClassName="MyOverRideTransitionedClass"/>

    Setting inline styles to the default button. This will apply the styles to the scroll-up-button.

        <ScrollUpButton style={{width: 75}} ToggledStyle={{right: 100}}/>

    Custom Button:

    import React from "react";
    import ScrollUpButton from "react-scroll-up-button";
     
    export default class Index extends React.Component {
        render() {
            return (
                <div>
                    <ScrollUpButton ContainerClassName="ScrollUpButton__Container" TransitionClassName="ScrollUpButton__Toggled">
                        // Here you can add any react component or jsx
                        // ScrollButton will apply the classnames given to the container of whatever you put here.
                        // Changing appearence this way will only work when importing the default ScrollUpButton, importing any of the specific buttons do not except children
                    </ScrollUpButton>
                </div>
            );
        }
    }

    Configuration:

        <ScrollUpButton
          StopPosition={0}
          ShowAtPosition={150}
          EasingType='easeOutCubic'
          AnimationDuration={500}
          ContainerClassName='ScrollUpButton__Container'
          TransitionClassName='ScrollUpButton__Toggled'
          style={{}}
          ToggledStyle={{}}
        />

    StopPosition -- PageYOffset in which you want the page to stop at when scrolling up.

    ShowAtPosition -- PageYOffset position at which the button will show up.

    EasingType -- Easing option see : (https://www.npmjs.com/package/tween-functions) for available options.

    AnimationDuration -- Milisecond duration of scrolling up.

    ContainerClassName -- Class name applied to the container when NOT using the default view.

    TransitionClassName -- Class name applied to the container to show the button when NOT using the default view.

    style -- style the container directly with inline styleing, can be used with any imported button.

    ToggledStyle -- Style the toggled state of the container directly, can be used with any imported button.


    Themed Buttons:

    Click on a button to see its code.

    Vertical Button Circle Arrow Button Tiny Up Button
    vertical_button circle_arrow_button tiny_up_button

    Vertical Button:

    vertical_button

    Vertical_Button | React:

    import React from "react";
    import {VerticleButton as ScrollUpButton} from "react-scroll-up-button"; //Add this line Here
    
    export default class Index extends React.Component {
      render() {
        return (
          <div>
            <ScrollUpButton />
          </div>
        );
      }
    }
    

    Circle Arrow Button:

    circle_arrow_button

    Circle_Arrow_Button | React:

    import React from "react";
    import {CircleArrow as ScrollUpButton} from "react-scroll-up-button"; //Add this line Here
    
    export default class Index extends React.Component {
      render() {
        return (
          <div>
            <ScrollUpButton />
          </div>
        );
      }
    }
    

    Tiny Up Button:

    tiny_up_button

    Tiny_Up_Button | React:

    import React from "react";
    import {TinyButton as ScrollUpButton} from "react-scroll-up-button"; //Add this line Here
    
    export default class Index extends React.Component {
      render() {
        return (
          <div>
            <ScrollUpButton />
          </div>
        );
      }
    }
    

    More To Come!!


    Credit

    I was inspired by: https://github.com/milosjanda/react-scroll-up With the base recource of the repo i was able to create my own in my style with additional functionality.

    Install

    npm i react-scroll-up-button

    DownloadsWeekly Downloads

    6,720

    Version

    1.6.4

    License

    MIT

    Unpacked Size

    43.8 kB

    Total Files

    25

    Last publish

    Collaborators

    • dirtyredz