JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 59612
  • Score
    100M100P100Q161241F

A universal headless progress component for React Native, Next.js & React

Package Exports

    This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@gluestack-ui/progress) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

    Readme

    @gluestack-ui/progress

    The Progress component is designed to display the progress of a task that involves multiple steps and takes some time to complete. It helps users stay informed about the current status of a lengthy process.

    Installation

    To install the component, run the following command in your terminal. This will add the component to your project's dependencies and allow you to use it in your project.

    npx gluestack-ui@latest add progress

    Usage

    Default styling of the component can be found in the components/core/progress file. For reference, you can view the source code of the styled Progress component.

    // import the styles
    import {
      Root,
      FilledTrack,
    } from '../components/core/progress/styled-components';
    
    // import the createProgress function
    import { createProgress } from '@gluestack-ui/progress';
    
    // Understanding the API
    const Progress = createProgress({
      Root,
      FilledTrack,
    });
    
    // Using the Progress component
    export default () => (
      <Progress>
        <ProgressFilledTrack />
      </Progress>
    );

    More guides on how to get started are available here.