Gradiently

A minimal, lightweight colour picker to generate beautiful colours and gradients.

Demo

Installation

npm install gradiently

yarn add gradiently

pnpm add gradiently

Basic Usage

import { ColorWheel } from 'gradiently'

const [gradient, setGradient] =  useState<string>("");

<ColorWheel
  radius={120}
  onChange={setGradient}
/>

Advanced Usage

const [gradient, setGradient] =  useState<string>("");

<ColorWheel
  radius={120}
  pickers={2}
  gradientType={'linear'}
  direction={'right'}
  onChange={setGradient}
/>

Props

| Prop | Type | Default Value | Required? | | ------------- | ------------- | ----------- | ----------| | radius | number | 100 | no | | pickers | number | 3 (max 3, min 1) | no | | onChange | (value: string) => void | | yes | | gradientType | linear or radial | linear | no | direction | DirectionsIndex | right | no

DirectionsIndex type

import { ColorWheel, DirectionsIndex } from 'gradiently'

type DirectionsIndex = "top" | "top right" | "right" | "bottom right" | "bottom" | "bottom left" | "left" | "top left"