How to use the culori.formatter function in culori

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { linkTo } from '@storybook/addon-links';

// helpers
import ControlledComponentWrapper from './helpers/ControlledComponentWrapper';
import CustomSelectionUI from './helpers/CustomSelectionUI';
import PortalWrapper from './helpers/PortalWrapper';

import culoriscales from 'culori-scales';
import { colorsNamed, formatter } from 'culori';

let { scales } = culoriscales;
let hex = formatter('hex');

import { SketchPicker } from 'react-color';

import { 
	Position,
	Surface,
	PolarSurface,
	DeltaSurface,
	TextInput,
	NumericInput,
	NumericInputControls,
	List,
	ListItem,
	Slider,
	SliderHandle,
	SliderProgress,

format_color(value) {
		return formatter(this.props.format)(value);
	}

onChange: noop,
	onStart: noop,
	onEnd: noop,
	reactive: false
};

/*
	Utilities
	-----------------------------------------------------------------
 */

const toWhite = color => [color, 'white'];
const toBlack = color => [color, 'black'];

const roundi = culoriRound(0);
const _css = culoriFormatter();

const extract_hsba = color => {
	let hsba = culoriHsv(color);
	let ret = {};
	if (!hsba) return ret;
	if (hsba.h !== undefined) ret['hue'] = hsba.h;
	if (hsba.s !== undefined) ret['saturation'] = hsba.s * 100;
	if (hsba.v !== undefined) ret['brightness'] = hsba.v * 100;
	if (hsba.alpha !== undefined) {
		ret['opacity'] = roundi(hsba.alpha * 100);
	} else {
		ret['opacity'] = 100;
	}
	return ret;
};

import React from 'react';
import PropTypes from 'prop-types';
import memoize from 'memoize-one';
import { rgb, formatter } from 'culori';

import Slider from '../Slider/Slider';
import SliderHandle from '../Slider/SliderHandle';
import ColorBand from '../ColorBand/ColorBand';
import CheckerboardBand from '../ColorBand/CheckerboardBand';

import { noop } from '../util/functions';

let css = formatter();

const colors_for_color = memoize(str => {
	let color = rgb(str);
	return [css({ ...color, alpha: 0 }), css({ ...color, alpha: 1 })];
});

class OpacitySlider extends React.PureComponent {
	render() {
		let colors = colors_for_color(this.props.color);
		return (

static getDerivedStateFromProps(props, current_state) {
		return {
			value: formatter(props.format)(props.value)
		};
	}

static getDerivedStateFromProps(props, current_state) {
		return {
			value: props.autoFormat ? formatter(props.format)(props.value) : props.value
		};
	}

import React from 'react';
import PropTypes from 'prop-types';
import culori, { formatter, samples, interpolate } from 'culori';

import { noop } from '../util/functions';

import Swatch from '../Swatch/Swatch';
import SwatchList from '../SwatchList/SwatchList';

import './ColorVariations.css';

const hex = formatter('hex');

class ColorVariations extends React.PureComponent {
	render() {
		let { color, scale, count, mode, className, tabIndex, trim } = this.props;

		let variations = samples(count)
			.map(interpolate(scale(color), mode))
			.map(hex);

		if (trim) {
			variations = variations.slice(1, variations.length - 1);
		}

		return (

import React from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';

import Swatch from '../Swatch';

import culoriscales from 'culori-scales';
import { colorsNamed, formatter } from 'culori';

let { scales } = culoriscales;
let hex = formatter('hex');

storiesOf('Swatch', module)
	.add('Basic swatch', () => )
	.add('ColorBrewer swatches', () => {
		return (
			<div>
				<h1>Culori scales</h1>

				{Object.keys(scales).map(scale =&gt; (
					<div>
						<h2>{scale}</h2>
						{scales[scale].map((c, idx) =&gt; (
							
						))}
					</div>
				))}</div>

format_color(value) {
		return formatter(this.props.format)(value);
	}