React component (react-fundraising-countdown)

This is a simple package that can be used for two purposes:

• 1- Used for Countdown only (FlipCard countdown) day: hours: minutes: seconds
• 2- fundraising campaign countdown, milestones, and progress bar to display the fund achieved progress compare to the minimum and maximum Fund target.

Click here to check it out

inspired by React Flip Clock , A Pen by Libor Gabrhel

Getting Started

You can install via npm or yarn:

• npm install react-fundraising-countdown -S
• yarn add react-fundraising-countdown

Live Demo

Motivation

The idea started when building a small website for an ICO campaign. So I thought of separating this fundraising countdown, fund progress, and milestones of a series of steps within the campaign from the main package so it can be reusable and serves as a starting point for further enhancement by developers to make it great and more useful.

Usage

const milestonesData= [{
  text: 'Campaign Start',
  cap: 0
},{
  text: 'Minimum Goal $15M',
  cap: 15000000
},{
  text: 'Maximum Goal $24M',
  cap: 24000000
},];

  <h1>Just Countdown without progress bar or Milstones</h1>
  <FundClockProgress campaignEndDate={'2020-10-14'} />

  <h1>With Milestones & Progress bar for Crowdsale</h1>
  <FundClockProgress
    icoProgress
    currentFund={this.state.currentFund}
    softcap={15000000}
    hardcap={30000000}
    milestones={milestonesData}
    milestoneLineColor={'#a44fd2'}
    progressColor={'warning'} //bootstrap default colors: 'warning', 'info', 'success', ...etc .. please refer to bootstrap colors names
    icoClockStyle={{backgroundColor:'#ddd'}}
    icoClockFlipStyle={{backgroundColor:'#ddd'}}
    icoClockFlipTextStyle={{color:'#e91e63'}}
    unitLabelContainerStyle={{backgroundColor:'#e91e63'}}
    // unitLabelTextStyle={{color:'#000', fontSize: '1.1em'}}
  />

Live Demo

Props

Name	Type	Default	Desc
icoProgress	bool	false	show progress when the time is up
campaignEndDate	string (date format)	10 seconds from current date-time
currentFund	number	0	the current fund your raised do far
softcap	number	0	the soft cap you need to achieve to start your project
hardcap	number	the maximum cap needed
milestones	array of object	[]	takes an object of two attributes (text, cap) see the example above
progressColor	string	primary	color of the progress bar
milestoneLineColor	string	grey	color to represent the line and milestone text
icoClockStyle	object	{backgroundColor:'#000'	Clock Unit container Style
icoClockFlipStyle	object	{backgroundColor:'#000'}	the folding Clock container style
icoClockFlipTextStyle	string (color)	{color:'#fff'}	the clock digit text style of each unit
unitLabelContainerStyle	string (color)	{backgroundColor:'#000'}	the Unit label Container Style
unitLabelTextStyle	string (color)	{color:'#fff'}	the Unit label Text Style