React Loading Button

Button with a built-in loading indicator.

Installation

Install using npm

npm install @bitwiseindustries/react-loading-component

or using yarn

yarn add @bitwiseindustries/react-loading-component

and import the component in your project

import { LoadingButton } from '@bitwiseindustries/react-loading-button`

Usage

Using the LoadingButton is simple. Just pass it an isLoading prop to indicate whether a loading spinner should be shown or not. In the example below, a state variable is used to control the loading state.

Example

const MyComponent = () => {
  const [loading, setLoading] = useState(false);

  const handleClick = () => {
    setLoading(true);
    setTimeout(() => setLoading(false), 5000);
  };
  return (
    <LoadingButton isLoading={loading} onClick={handleClick}>
      Submit
    </LoadingButton>
  );
};

Customization

By default, the LoadingButton uses default styled components for the underlying button and loading spinner. However, these can be completely customized by passing custom components for the optional Button and Spinner props.

Custom Button

The Button prop can be any valid function component that accepts ButtonProps as props.

Example

import { FC } from 'react';
import { LoadingButton, ButtonProps } from '@bitwiseindustries/react-loading-button';

const CustomButton: FC<ButtonProps> = ({ children, ...buttonProps }) => (
  <button {...buttonProps} style={{ backgroundColor: '#ffc107', borderColor: '#ffc107', color: '#000' }}>
    {children}
  </button>
);

<LoadingButton Button={CustomButton}>Click Me</LoadingButton>;

Example with Styled-Components

import styled from 'styled-components';
import { LoadingButton, ButtonProps } from '@bitwiseindustries/react-loading-button';

const StyledButton = styled.button`
  background-color: #ffc107;
  border-color: #ffc107;
  color: #000;

  &:hover {
    background-color: ##d49e00;
  }
`;

<LoadingButton Button={StyledButton}>Click Me</LoadingButton>;

Custom Spinner

The Spinner prop can be any valid function component.

Example

import styled, { keyframes } from 'styled-components';
import { LoadingButton } from '@bitwiseindustries/react-loading-button';

const spinnerAnimation = keyframes`
  0% {
      transform: scale(0);
  }
  50% {
      opacity: 1;
      transform: none;
  }
`;

const StyledSpinner = styled.div`
  display: inline-block;
  width: 2rem;
  height: 2rem;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0;
  animation-name: ${spinnerAnimation};
  animation-duration: 0.75s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
`;

<LoadingButton Spinner={StyledSpinner}>Click Me</LoadingButton>;

API

| Property | Type | Default | Description | | ---------------- | ----------------------------- | ------- | -------------------------------------------------------- | | idLoading | boolean | false | Loading state (set to true to show loading spinner) | | spinnerPlacement | 'left', 'right', or 'replace' | 'left' | Placement of the loading spinner in relation to children | | Button | FunctionComponent | | Custom component to use for button | | Spinner | FunctionComponent | | Custom component to use for loading spinner |