0.0.6 • Published 5 years ago

colour-pickr v0.0.6

Weekly downloads
2
License
MIT
Repository
github
Last release
5 years ago

colour-pickr


React Color Picker

npm version npm download npm dependency Build Status

CTF

    This is an example of an extremely dangerous method to penetrate a 
    web app: Typosquatting
      
    Basically, a perfectly valid repository could contain malicious 
    code that AND valid code.
    
    If a node developer in this case were to npm install `colour-pickr` 
    instead of `color-picker` they would pull in a repository I made in 
    20 minutes with whatever code I wanted to be run on their computers.

    A real-life example where this type of vulnerability affected a ton 
    of codebases across the javascript landscape can be found here:
    https://schneider.dev/blog/event-stream-vulnerability-explained/

    Here is the md5 for your ctf: 6266dfde41373fc18e10429e05be946a

Browser Support

ChromeEdgeFirefoxIEOperaSafari
Chrome 31.0+ ✔Edge 12.0+ ✔Firefox 31.0+ ✔IE 10+ ✔Opera 30.0+ ✔Safari 7.0+ ✔

Screenshots

Development

npm install
npm start

Example

online example: http://react-component.github.io/color-picker/

Feature

  • support color mode RGB HSB HSL

install

colour-pickr

Usage

var ColorPicker = require('colour-pickr');
var React = require('react');
var ReactDOM = require('react-dom');
ReactDOM.render(<ColorPicker />, container);

API

ColorPicker.props

nametypedefaultdescription
alignObject: alignConfig of dom-alignpopup 's align config
alphaNumber100opacity of the color
animationStringindex.css support 'slide-up'
childrenNode<span className='react-colorpicker-trigger'></span>additional trigger appended to picker
classNameString''Aditional class to be added to component
colorString#ff0000color board current background color
defaultAlphaNumber100opacity of the color
defaultColorString#ff0000color board current background color
enableAlphaBooleantrueenable alpha controls
getCalendarContainerFunction():Elementfunction(){return document.body;}dom node where picker to be rendered into
modeStringRGBcolor mode, support mode 'RGB', 'HSB' or 'HSL'
onChangeFunctionnoopwhen select color
onCloseFunctionnoopwhen color picker popup close
onOpenFunctionnoopwhen color picker popup open
placementStringtopLeftone of 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
transitionNameStringcss class for animation

ColorPicker.Panel.props

nametypedefaultdescription
alphaNumber100opacity of the color
classNameString''Aditional class to be added to component
colorString#ff0000color board current background color
defaultAlphaNumber100opacity of the color
defaultColorString#ff0000color board current background color
enableAlphaBooleantrueenable alpha controls
modeStringRGBcolor mode, support mode 'RGB', 'HSB' or 'HSL'
onBlurFunctionwhen picker loose focus
onChangeFunctionwhen select color trigger
onFocusFunctionwhen picker focus trigger
styleObject{}root node CSS style

License

colour-pickr is released under the MIT license.