@foseberg/react-useloading
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Introduction

UseLoading allows you to easily add loading states to your elements by following a simple pattern of adding a data-loading property to the elements you want to trigger loading states on:

import useLoading from 'useLoading'


const Card = ({ loading }: ICardProps) => {
  const ref = useLoading(loading, 'loadingClass');

  return (
    <div className="card" ref={ref}>
      <h1 className="card-title" data-loading>
        This is a title
      </h1>
      <p className="card-description" data-loading>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
        imperdiet orci eget nunc mattis faucibus. In a purus turpis. Cras
        condimentum diam nec consequat cursus.
      </p>

      <Image />

      <div className="card-price" data-loading>
        1000$
      </div>
    </div>
  );
};

export default Card;

Readme

Keywords

none

Package Sidebar

Install

npm i @foseberg/react-useloading

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

4.7 kB

Total Files

8

Last publish

Collaborators

  • foseberg