color-picks
v0.2.2
Published
A color picker ui for browser
Downloads
3
Maintainers
humandetailReadme
color-picks
A color picker ui for browser.
Install
Install with npm:
npm i color-picksInstall with yarn:
yarn add color-picksInstall with pnpm:
pnpm add color-picksUsage
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Color Picks</title>
</head>
<body>
<div id="app">
<button class="trigger">Click me.</button>
</div>
<script type="module" src="/src/index.ts"></script>
</body>
</html>src/index.ts
import ColorPicks from 'color-picks'
import 'color-picks/index.css'
const colorPicks = new ColorPicks('.trigger')
// optional
colorPicks.setColor('#ffffff')
colorPicks.on('confirm', (color: string) => {
document.body.style.background = color
})Params
| param | type | default | description | | -------------- | ------------------------ | ------- | ----------------- | | triggerElement | string | HTMLElement | - | Trigger element | | outputType | 'HEX' | 'RGB' | 'RGBA' | 'HEX' | Output color type | | theme | 'light' | 'dark' | 'dark' | Theme |