Neatly Positioned Magazines

    react-tinted

    0.0.3 • Public • Published

    react-tinted

    Tinted is a color harmony wheel. It helps you choose color combinations that create pleasing contrasts and feel harmonious.

    Demo

    Install

    # Install with yarn 
    yarn add react-tinted
     
    # Or install with NPM 
    npm i react-tinted

    Usage

    import {TintedWheel, TintedPalette, colorModes} from 'react-tinted'
    <div className='my-color-wheel'>
      <TintedWheel colorCount={5} mode={colorModes.ANALOGOUS}>
        <TintedPalette />
      </TintedWheel>
    </div>
    @use 'tinted/wheel';
    @use 'tinted/palette';
     
    .my-color-wheel {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin: auto;
      max-width: 400px;
    }

    A few things to note:

    • The wheel can be used without the palette, but it is recommended to use them together.
    • To make these abbreviated @use statements work, you will need to add node_modules to SASS' --load-path or sass-loader's includePaths. Alternatively, you could just path into node_modules explicitly.
    • If you're not using SASS in your project, we do provide compiled CSS files in the tinted/dist folder.

    Custom Colors

    You can initialize Tinted with a custom color set:

    <TintedWheel
      mode={colorModes.CUSTOM}
      customColors={[
        'red',
        '#0ff',
        {r: 0, g: 255, b: 0},
        {h: 220, s: 1, v: 1},
        {h: 300, s: 1, l: 0.5},
        'hsl(0, 100%, 50%)',
      ]}
    >
      <TintedPalette />
    </TintedWheel>

    Components

    TintedWheel

    The color harmony wheel for the user to make a selection of colors.

    Props

    Name Type Description
    children React.Children Color wheel "plugins" like the TintedPalette
    className string A class name to add to the root element
    colorCount number The number of colors to use in the color harmony
    initRoot color-like value The color that should initially be used to select other harmony colors
    customColors color-like array Rather than specify a root color and a color count, you can pass an array of color-like objects and strings
    mode string The color harmony mode. Determines how initRoot is used to find other colors
    colorWheelImage string A URI to a color HSV color wheel image to use
    onColorsChanged (hexColorStrings, currentMode, wheel) => void Callback invoked when the user manipulates the color markers
    radius number The radius of the wheel in SVG coordinate units
    markerWidth number The diameter of the markers used to select colors on the wheel in SVG coordinate units
    markerOutlineWidth number The width of the outline of the color marker in SVG coordinate units
    margin number The distance between the border of the <svg> and the circle of the wheel in SVG coordinate units. It is not recommended to pass this prop
    baseClassName string The prefix for the class names for all generated elements. Overriding this will cause all provided CSS to no longer work. It is not recommended to pass this prop

    Also spreads any other props passed on the root element.

    TintedPalette

    A palette of colors to display the user's chosen values from the TintedWheel. For each color it:

    • Allows the user to change the value (or brightness -- "V" in the HSV color model) of the color
    • Displays the hex string value of the color

    Props

    Name Description
    children An element to be duplicated beneath each color in the palette
    className A class name to add to the root element

    Also spreads any other props passed on the root element.

    Styling

    Feel free to override any of the default styling as you please.

    Out of the box, tinted supports a color scheme for a light and dark background, defaulting to the light background. To change it to expect a dark background, add a tinted--dark class to a parent element of the wheel and/or palette.

    Install

    npm i react-tinted

    DownloadsWeekly Downloads

    4

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    40.1 kB

    Total Files

    4

    Last publish

    Collaborators

    • zposten