react-cosha

Colorful shadows for your images in React. 🎨

Port cosha to React

How

yarn add @lbsonley/react-cosha

import React from "react";
import Cosha from "react-cosha";

const Page = () => (
  <>
    <h1>Colorfully Shadowed Images</h1>
    {/* With a plain old image */}
    <Cosha>
      <img src="palm-tree.jpg" alt="nice vibes"/>    
    </Cosha>
    {/* With a picture tag */}
    <Cosha>
      <picture class="colorful-shadow">
        <source srcset="palm-tree-1200.jpg 1200w, palm-tree-800.jpg 800w, palm-tree-400.jpg 400w" type="image/jpeg">
        <source srcset="palm-tree-1200.webp 1200w, palm-tree-800.webp 800w, palm-tree-400.webp 400w" type="image/webp">
        <img src="palm-tree-400.jpg" alt="nice vibes"/>
      </picture>
    </Cosha>
  </>
);

export default Page;

Customizing your shadow

react-cosha takes the follow props. Use them to customize the shadow attributes. Or just wrap your images in a <Cosha> tag and use the defaults.

Name	Type	Required	Default	Description
blur	string	no	"10px"	Shadow blur
brightness	string	no	"125%"	Shadow brightness
saturation	string	no	"110%"	Shadow saturation
x	string	no	"2px"	Shadow horizontal offset
y	string	no	"6px"	Shadow vertical offset

Gotcha

It runs in every browser except Internet Explorer. This is because of missing support for CSS filter properties. In case cosha detects it's running in a browser that doesn't have NodeList.prototype.forEach available, which at this point is only IE <= 11, it simply doesn't do anything.

License

MIT

Giving Credit Where Credit is Due

Big shoutout to Robin Loeffel for creating the vanilla JS package. This project here simply adapts the original concept to use React's DOM API.