swyxio / react-styled-duotone

A styled component to implement duotone images in react with css mix-blend. See demo at:

React Mixblend Duotone

a small starter for building a component library with styled-components 💅

Demo is at: https://sw-yx.github.io/react-styled-duotone/demo

Overview

This component lib uses:

CSS mix-blend mode styled-components, polished, styled-components-modifiers 💅

Color themes

• Primary-Color: #FBFBFB, Secondary-Color: #283B6B
• Primary-Color: #FCC862, Secondary-Color: #2D45C6
• Primary-Color: #71DF6F, Secondary-Color: #272D67
• Primary-Color: #D92037, Secondary-Color: #2A3060
• Primary-Color: #8ADFD0, Secondary-Color: #5C2998
• Primary-Color: #FCC862, Secondary-Color: #2D45C6
• Primary-Color: #A3D5CA, Secondary-Color: #E52839

Further reading

• https://css-tricks.com/almanac/properties/m/mix-blend-mode/ Demoed here and here
• http://webdesignerwall.com/tutorials/create-spotify-colorizer-effects-css-blend-modes
• also check out: https://github.com/nagelflorian/react-duotone and https://lukyvj.github.io/colofilter.css/
• or SVG filters demoed here and here and here

Up & Running

To install dependencies with Yarn, run:

$ yarn

or to install with npm, run:

$ npm install

Build

NOTE: When you run build, Babel will create a build directory. This is what your users will interact with when they use your library. Nothing in lib gets shipped with your published module.

Run once:

$ npm run build

Run the watch script:

$ npm run build:watch

NOTE: the build script runs in the prepublish script just before you publish to npm.

Publishing

If you already have an account with npm, you can simply run:

$ npm login
$ npm publish

If you don't have an account with npm:

NOTE: Your email address is public

$ npm set init.author.name "Your Name"
$ npm set init.author.email "[email protected]"
$ npm set init.author.url "http://yourblog.com"
$ npm adduser
$ npm publish

Contributing

I am thankful for any contributions made by the community. By contributing you agree to abide by the Code of Conduct in the Contributing Guidelines. https://hackernoon.com/building-a-react-component-library-part-2-46fd4f77bb5c

License

MIT