Skip to content

Latest commit

 

History

History

colorpickers

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
demo
demo
 
 
src
src
 
 
README.md
README.md
 
 
package.json
package.json
 
 
tsconfig.build.json
tsconfig.build.json
 
 

README.md

@zendeskgarden/react-colorpickers npm version

This package includes components related to color pickers in the Garden Design System.

Installation

npm install @zendeskgarden/react-colorpickers

# Peer Dependencies - Also Required
npm install react react-dom styled-components @zendeskgarden/react-theming

Usage

ColorPicker

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { ColorPicker } from '@zendeskgarden/react-colorpickers';


/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <ColorPicker defaultColor="#17494D">
</ThemeProvider>

ColorPickerDialog

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { ColorPickerDialog } from '@zendeskgarden/react-colorpickers';

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <ColorPickerDialog defaultColor="#17494D" buttonProps={{ 'aria-label': 'Example label' }} />
</ThemeProvider>;

ColorSwatch

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { ColorSwatch } from '@zendeskgarden/react-colorpickers';

const colors = [
  [
    { label: 'Green-800', value: '#0b3b29' },
    { label: 'Green-700', value: '#186146' }
  ],
  [
    { label: 'Green-600', value: '#038153' },
    { label: 'Green-500', value: '#228f67' }
  ]
];

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <ColorSwatch colors={colors} name="swatch" />
</ThemeProvider>;

ColorSwatchDialog

import { ThemeProvider } from '@zendeskgarden/react-theming';
import { ColorSwatchDialog } from '@zendeskgarden/react-colorpickers';

const colors = [
  [
    { label: 'Green-800', value: '#0b3b29' },
    { label: 'Green-700', value: '#186146' }
  ],
  [
    { label: 'Green-600', value: '#038153' },
    { label: 'Green-500', value: '#228f67' }
  ]
];

/**
 * Place a `ThemeProvider` at the root of your React application
 */
<ThemeProvider>
  <ColorSwatchDialog
    colors={colors}
    name="swatch-dialog"
    buttonProps={{ 'aria-label': 'Example label' }}
  />
</ThemeProvider>;