gradiently
TypeScript icon, indicating that this package has built-in type declarations

1.0.9 • Public • Published

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"

/gradiently/

    Package Sidebar

    Install

    npm i gradiently

    Weekly Downloads

    1

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    209 kB

    Total Files

    14

    Last publish

    Collaborators

    • elijahnikov