stanleyxu2005 / react-checkmark

Animated checkmark for React

react-checkmark

Animated checkmark you already need for React

See Live Demo

Getting Started

Install the component

npm i react-checkmark

Use the component

import { Checkmark } from 'react-checkmark'

Default usage

render() {
  return ( <Checkmark /> )
}

Usage with size specified:

• 'small' for 16px
• 'medium' for 24px
• 'large' for 52px
• 'xLarge' for 72px
• 'xxLarge' for 96px
• or specify a valid number for pixel

render() {
  return (
    <>
      <Checkmark size='xxLarge' />
      <Checkmark size='96px' />
    </>
  )
}

Usage with color (name or hex value) specified:

render() {
  return (
    <>
      <Checkmark size='128px' color='blue' />
      <Checkmark size='256px' color='#223344'/>
    </>
  )
}

---

LICENCE Apache 2.0 - Created by Stanley Xu

react-checkmark's Issues

Custom check animation speed

Hello Stanley.
First, thanks for this wonderful library. It's been of so much use to me.
I would love to know how I can customize the animation duration for the check. Thanks.

Add support for React v17

Please update to support React 17 (at a minimum).

Warning: Failed prop type: c: prop type `size` is invalid;

When using Checkmark as:
<Checkmark size="xxLarge" />
or
<Checkmark size={96} />

I get the following error:

Warning: Failed prop type: c: prop type `size` is invalid; it must be a function, usually from the `prop-types` package, but received `number`.

IE 11 Support

Does this work with IE 11 ?

How to change color

is it possible to change the color of the background and the arrow color?

Any way to get this inline with text?