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.