npm

@lbsonley/react-cosha

0.1.3 • Public • Published

react-cosha

latest version on npm npm downloads a month required node version package license

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.

Package Sidebar

Install

npm i @lbsonley/react-cosha

Weekly Downloads

0

Version

0.1.3

License

MIT

Unpacked Size

304 kB

Total Files

5

Last publish

Collaborators

  • lbsonley