https://github.com/fdmediagroep/fdmg-ts-react-progress-bar

ReactJS ProgressBar component
https://github.com/fdmediagroep/fdmg-ts-react-progress-bar

component enzyme fdmg jest react reactjs tslint typescript typescript2

Last synced: 9 months ago
JSON representation

ReactJS ProgressBar component

• Host: GitHub
• URL: https://github.com/fdmediagroep/fdmg-ts-react-progress-bar
• Owner: FDMediagroep
• Archived: true
• Created: 2017-12-08T09:39:21.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-05-07T08:58:28.000Z (about 6 years ago)
• Last Synced: 2025-01-06T09:43:22.617Z (over 1 year ago)
• Topics: component, enzyme, fdmg, jest, react, reactjs, tslint, typescript, typescript2
• Language: TypeScript
• Size: 980 KB
• Stars: 1
• Watchers: 8
• Forks: 2
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

          
> :exclamation: **DEPRECATED** :exclamation:

[![Build Status](https://travis-ci.org/FDMediagroep/fdmg-ts-react-progress-bar.svg?branch=master)](https://travis-ci.org/FDMediagroep/fdmg-ts-react-progress-bar)

[![Coverage Status](https://coveralls.io/repos/github/FDMediagroep/fdmg-ts-react-progress-bar/badge.svg?branch=master)](https://coveralls.io/github/FDMediagroep/fdmg-ts-react-progress-bar?branch=master)

[![npm version](https://badge.fury.io/js/%40fdmg%2Fts-react-progress-bar.svg)](https://badge.fury.io/js/%40fdmg%2Fts-react-progress-bar)

# fdmg-ts-react-progress-bar

[![Greenkeeper badge](https://badges.greenkeeper.io/FDMediagroep/fdmg-ts-react-progress-bar.svg)](https://greenkeeper.io/)

[ReactJS](https://reactjs.org/) ProgressBar component. This component renders a progress bar using an input of 

`type=range`. A screenshot of the ProgressBar in action below:

![alt text](https://github.com/FDMediagroep/fdmg-ts-react-progress-bar/blob/master/demo/screenshots/audio-widget.png)

## Installation

- Run `npm i --save-dev @fdmg/ts-react-progress-bar`

or

- Run `yarn add @fdmg/ts-react-progress-bar --dev`

## Usage

### TypeScript

```

import * as React from 'react';

import H1 from 'fdmg-ts-react-progress-bar';

export default class foo {

    public state: any;

    public props: any;

    constructor(props: any) {

        super(props);

        this.props = props;

        this.handleElapsedTimeUpdate = this.handleElapsedTimeUpdate.bind(this);

    }

    

    handleElapsedTimeUpdate(e) {

        console.log('Elapsed time percentage', e.target.value);

    }

    render() {

        return (

             { this.progressBar = progressBar; }}

                currentTime={12}

                duration={300}

                percentage={4}

                onElapsedTimeUpdate={this.handleElapsedTimeUpdate}

                autoPlay={true}

                isBuffering={false}

                hideTimeLine={false}

            />

        );

    }

}

```

### Resulting HTML

```



    


        


            

            

        

    

    


        12s

        5m 0s

    



```