Skip to content
Present your application colors with style.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__
example
src
.babelrc
.eslintrc.js
.flowconfig
.gitignore
.publishrc
.travis.yml
LICENSE
README.md
codecov.yml
logo.png
package.json
yarn.lock

README.md


Build Status Code Coverage Code Style

Present your application colors with style.

TL;DR; Demo

colors-show.now.sh

Installation

yarn add colors-show

// or

npm install colors-show

Usage

First, you have to import the component

  import ColorsShow from 'colors-show';

Lets say, you have some color guides in your application:

export const green = {
  Green: '#00a757',
  Dark_Green: '#00904b',
  Light_Green: '#05d073',
  Dimmed_Green: '#7fd3ab',
};

export const blue = {
  Blue: '#378cbe',
  Dark_Blue: '#367fa9',
  Light_Blue: '#4cade6',
  Dimmed_Blue: '#9bc5de',
};

Simplest example:

<ColorsShow colors={green} />

You're all set! Now let's see how can you customize this component:

Props

colors - object / required - Map of colors where key is a name and value is a color in CSS one of css formats.

width - number / 100 - width of the box.

height - number / 100 - height of the box.

space - number / 20 - space between boxes.

lines - bool / false - if you want lines insted of boxes.

stacked - bool / false stacked boxed with hover effect.

name - string / "" - group name.

showNames - bool / false - you can turn it off to show only color codes.

containerClassName - string / "" - additional class for container.

wrapperClassName - string / "" - additional class for wrapper.

boxClassName - string / "" - additional class for box.

colorInfoClassName - string / "" - additional class for color info.

component - React.Component / null - custom Box component.

Custom components

You can use your own component to presnt colors. You can extend Box component from colors-show or use your own.

const Circle = styled(Box)`
  border-radius: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
`;

In both cases component will get few props:

  • width
  • height
  • space
  • stacked
  • className
  • style = { backgroundColor: COLOR }

ClassNames

As you can see there is option to provide additional CSS classes for all elements. Lets look at component structure:

  <Container>                 // containerClassName
    <Name />                  // wrapperClassName
    <Boxes>
      <Box>                   // boxClassName
        <ColorInfo>           // colorInfoClassName
          <span>code</span>
          <span>name</span>
        </ColorInfo>
      </Box>
    </Boxes>
  </Container>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.