npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kwooshung/react-progressbar-wrapper

v1.0.9

Published

The progress bar wrapper at the top of the website supports RTL and the internal style is completely customized. This component only provides external wrapping elements without mentioning any styles.

Downloads

24

Readme

@kwooshung/react-progressbar-wrapper

An intuitive and user-friendly progress bar component. It supports custom positioning and styling, adapting to a variety of content and layout needs while providing a smooth user experience and high degree of customization.

GitHub License GitHub Release Date - Published_At GitHub last commit GitHub code size in bytes GitHub top language GitHub pull requests GitHub issues Github Stars NPM Version Npm.js Downloads/Week Github CI/CD codecov Maintainability Gitee Repo

Why Develop It?

  • Why not use NProgress? I used to be a frequent user of it as well, but over time, I found that it didn't meet my requirements. I was looking for a way to offer users a more realistic simulation of loading experiences, rather than just a simple, uniform speed load.

  • The style isn't flexible enough. I wanted to be able to customize the style of the loading bar, such as its color, height, and position. Although NProgress supports customization, I'm not fond of its method of definition. More importantly, it doesn't allow for defining the direction and position of the scrollbar.

Why Use It?

  • Supports customization of styles and components, offering more flexibility than just passing in properties.
  • Simulates a more realistic loading experience. For example, it loads to 60% in 3 seconds, then slowly to 80% over the next 5 seconds. It stops at 80% and waits for further instructions until the done property is true, at which point the loading bar immediately reaches 100% and then gradually fades away. For more details, refer to the API section below.
  • Multiple events for easy monitoring of the progress bar at each stage.
  • Versatile positioning options: you can place it at the top, bottom, left, or right side.
  • Various loading directions, including from left to right, right to left, top to bottom, and bottom to top, suitable for rtl and horizontal web page scenarios.
  • Supports bilingual comments in both English and Chinese.
  • Low learning curve, simple and flexible to use.
  • Implemented with modern ES6 features.
  • Written in TypeScript for type safety.
  • Supports on-demand import with esm modularization, natively supporting tree-shaking, so you don't have to worry about the size after packaging.
  • This project also provides a commonjs (cjs) version.
  • Test coverage of 100%.

Installation

npm

npm install @kwooshung/react-progressbar-wrapper

yarn

yarn add @kwooshung/react-progressbar-wrapper

pnpm

pnpm add @kwooshung/react-progressbar-wrapper

Usage

Style

In some frameworks, you can directly import the styles in the global css / less / scss files as shown below:

@import url('@kwooshung/react-progressbar-wrapper/dist/index.css');

In certain frameworks, like Next.js, you may need to add a ~ symbol for it to work, as shown below:

@import url('~@kwooshung/react-progressbar-wrapper/dist/index.css');

You can also import it in a global page, such as the Layout page in Next.js, or within the corresponding component, as shown below:

import '@kwooshung/react-progressbar-wrapper/dist/index.css';

Components

在某个元素上使用 ReactProgressbarWrapper 组件,如下所示:

import { KsProgressbarWrapper } from '@kwooshung/react-progressbar-wrapper';
import '@kwooshung/react-progressbar-wrapper/dist/index.css';

const ProgressChildren = <div style={{ height: '2px', background: 'linear-gradient(112.44deg,#ff5858 2.09%,#c058ff 75.22%)', backgroundSize: '165%' }} />;

const Demo = () => {
  const [active, setActive] = useState<boolean>(false);
  const [done, setDone] = useState<boolean>(false);
  return (
    <>
      <KsProgressbarWrapper active={active} done={done}>
        {ProgressChildren}
      </KsProgressbarWrapper>
      <button onClick={() => setActive(!active)}>Toggle</button>
    </>
  );
};

export default Demo;

API

Props

| Parameter | Description | Type | Default | | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | ------- | | active | Controls whether the progress bar is active. | boolean | false | | done | Indicates whether the loading is complete. | boolean | false | | position | Sets the position and direction of the progress bar. Options: 't-lr', 't-rl', 'b-lr', 'b-rl', 'l-tb', 'l-bt', 'r-tb', 'r-bt'. See Position and Direction below for more details. | string | 't-lr' | | loadTo | Sets the initial percentage to load to. | number | 65 | | durationLoadTo | Sets the time (in milliseconds) to reach the loadTo percentage. | number | 3000 | | loadToSlow | Sets the target percentage for slow loading. | number | 85 | | durationLoadToSlow | Sets the time (in milliseconds) to reach the loadToSlow percentage. | number | 6000 | | fluctuation | Sets the fluctuation range at the end of each stage. For instance, if loadTo is set to 60%, the endpoint will randomly be between 50%~70%. | number | 10 | | delayHide | Sets the delay time (in milliseconds) to hide after completion. | number | 500 | | durationHide | Sets the duration (in milliseconds) of the hide animation. | number | 300 |

Events

| Event | Description | Type | | ------------------ | ----------------------------------------------------------------------------------- | ----------------------- | | onStart | Triggered when the progress bar starts loading. | () => void; | | onLoadToStart | Triggered when loadTo starts loading. | () => void; | | onLoadToUpdate | Triggered during loadTo loading, parameter is the current loading percentage. | (value:number) => void; | | onLoadToDone | Triggered when loadTo loading is complete. | () => void; | | onLoadToSlowStart | Triggered when loadToSlow starts loading. | () => void; | | onLoadToSlowUpdate | Triggered during loadToSlow loading, parameter is the current loading percentage. | (value:number) => void; | | onLoadToSlowDone | Triggered when loadToSlow loading is complete. | () => void; | | onUpdate | Triggered during overall loading, parameter is the current loading percentage. | (value:number) => void; | | onDone | Triggered when the progress bar loading is complete. | () => void; |

Position and Direction

  • t-lr: Top from left to right
  • t-rl: Top from right to left
  • b-lr: Bottom from left to right
  • b-rl: Bottom from right to left
  • l-tb: Left side from top to bottom
  • l-bt: Left side from bottom to top
  • r-tb: Right side from top to bottom
  • r-bt: Right side from bottom to top