react-palette

KO | EN

gitlite — search

#javascript #hacktoberfest #react #go #golang #machine-learning #rust #deep-learning #nodejs #awesome #cli #kubernetes #ios #open-source

(★ 174)

Extract prominent colors from an image

파일 탐색기

최종 버전 다운로드 (.zip)

- - node-vibrant.ts
- - getPalette.ts
  - Palette.tsx
- getPalette.ts
- index.ts
- Palette.tsx
- usePalette.tsx
.gitignore
.travis.yml
jest.config.js
package.json
README.md
tsconfig.json
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# REACT PALETTE

Extract prominent colors from an image

[![Build Status](https://travis-ci.org/leonardokl/react-palette.svg?branch=master)](https://travis-ci.org/leonardokl/react-palette)
[![Coverage Status](https://coveralls.io/repos/github/leonardokl/react-palette/badge.svg?branch=master)](https://coveralls.io/github/leonardokl/react-palette?branch=master)

## Install
```
npm i -S react-palette
```

## Usage
```jsx
import Palette from 'react-palette';
// In your render...
<Palette src={IMAGE_URL}>
  {({ data, loading, error }) => (
    <div style={{ color: data.vibrant }}>
      Text with the vibrant color
    </div>
  )}
</Palette>
```

```jsx
import { usePalette } from 'react-palette'

const { data, loading, error } = usePalette(IMAGE_URL)

<div style={{ color: data.vibrant }}>
  Text with the vibrant color
</div>
```

## Palette callback example
```js
{
  darkMuted: "#2a324b"
  darkVibrant: "#0e7a4b"
  lightMuted: "#9cceb7"
  lightVibrant: "#a4d4bc"
  muted: "#64aa8a"
  vibrant: "#b4d43c"
}
```

## Notes

That library was created using `node-vibrant` to extract the prominent colors.

[https://github.com/akfish/node-vibrant](https://github.com/akfish/node-vibrant)

react-palette

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

react-palette

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README