react-countdown-circle-timer - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

		{
		"name": "react-countdown-circle-timer",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "Lightweight React countdown timer component with color and progress animation based on SVG",
		@@ -5,0 +5,0 @@ "main": "./lib/index.js",

README.md

		@@ -12,1 +12,47 @@ # React Countdown Circle Timer
		* Fully customizable content in the center of the circle

		## Installation
		```
		yarn add react-countdown-circle-time
		```
		or
		```
		npm install react-countdown-circle-time
		```

		## Basic usage
		```
		import { CountdownCircleTimer } from 'react-countdown-circle-timer';

		const UrgeWithPleasureComponent = () => (
		<CountdownCircleTimer
		durationSeconds={10}
		colors={[
		['#004777', .33],
		['#F7B801', .33],
		['#A30000']
		]}
		/>
		);

		```

		## Props

		\| Prop Name \| Type \| Default \| Description \|
		\|--------------------\|-------------------------------------------------------------------------------------\|------------\|------------------------------------------------------------------------------------------------------------------------------------------------\|
		\| durationSeconds \| number \| required \| Countdown duration in seconds \|
		\| colors \| Array<[color HEX: string, transition duration: float number between 0 and 1]> \| required \| Array of tuples: 1st param - color in HEX format; 2nd param - time to transition to next color represented as a fraction of the total duration \|
		\| size \| number \| 180 \| Width and height of the SVG element \|
		\| strokeWidth \| number \| 12 \| Path stroke width \|
		\| strokeLinecap \| Enum{ 'round', 'square' } \| 'round' \| Path stroke line cap \|
		\| trailColor \| string \| '#d9d9d9' \| Circle trail color - takes any valid color format (HEX, rgb, rgba, etc.) \|
		\| isPlaying \| boolean \| false \| Play and pause animation \|
		\| * isLinearGradient \| boolean \| false \| * Apples linear gradient on top of the circle. The gradient doesn't follow the circle path. Works best with two colors. \|
		\| gradientUniqueKey \| string \| - \| Unique ID for the linearGradient element. It takes random ID if it's not provided. \|
		\| renderTime \| function(remainingTime: number, elapsedTime: number, isPlaying: boolean): ReactNode \| - \| Render prop function to customize the content in the center of the circle. The content is centered using flexbox. \|
		\| onComplete \| function() \| - \| On complete handler \|

		## Roadmap
		* Test coverage
		* `a11y` support

.idea/workspace.xml

Sorry, the diff of this file is not supported yet

react-countdown-circle-timer - npm Package Compare versions

New alerts

Fixed alerts

Improved metrics