1.0.2 • Published 4 years ago

react-easy-back-to-top v1.0.2

Weekly downloads
15
License
MIT
Repository
github
Last release
4 years ago

react-easy-back-to-top

Description

An easy to use back to top component with React

Installation

npm install --save react-easy-back-to-top

Run the example locally

  1. npm install
  2. npm start

Usage

import React from "react";
import BackToTop from 'react-easy-back-to-top';

export default function Example() {
  return (
    <BackToTop
      backgroundColor="green"
      position={{ right: "5%", bottom: "10%" }}
      hover={{ backgroundColor: "black", color: "gray" }}
      transition="all 0.5s"
      showOnDistance={0}
      borderRadius={16}
      opacity="1"
      color="white"
      fontSize="24px"
      // Other Props...
    />
  );
}

Props

PropsTypesDefaultsDescriptions
iconstringYou can use any icon library after you import it to index.html via cdn etc. and these icons has to be applied with classnames. For example (Font awesome icons): icon="fas fa-arrow-up"
positionobject{ bottom: "0%", right: "0%"}Position of the button. You can specify top, right, bottom, left positions with 'px' or '%'
colorstringwhiteColor of text or icon inside of the button
backgroundColorstringblackBackground of the button
hoverobject{color: 'white', backgroundColor: 'black', opacity: '0.9'}If the button hovered, these styles gonna be applied to button
borderRadiusnumber48Border radius of the button
marginstring12pxMargin of the button
fontSizestring18pxFont size of the icon or text
paddingstring16pxPadding of the button
opacitystring1Opacity of the button
borderstringnoneBorder of the button
textstringThe text inside of the button
cursorstringpointerCursor style of the button
outlinestringnoneOutline style of the button
scrollBehaviorstringsmoothScroll behavior of the button. You can use any scroll behavior property. More
transitionstringnoneTransition property of the button More
showOnDistancenumber300The read-only scrollY property of the Window interface returns the number of pixels that the document is currently scrolled vertically. For example when you set it to showOnDistance={1000}, the button will appear when the user's scrollY greater than 1000 pixels. If you set it to 0, it will be always visible. More
zIndexnumber999z-index property for the button