CSS-Doodle: How to integrate to a ReactJS Project

CSS-Doodle is a web component for drawing patterns with CSS. It has been around since 2017 and is starting to take off with already 3.8k stars on Github!

Since CSS-Doodle’s website shows only example for plain HTML/CSS, I am going to show you guys how to use CSS-Doodle in your ReactJS Apps. It is plain and simple:

1. Install the npm library with npm.

npm install css-doodle

2. Create a file called doodle.js in your src folder.

// ./src/doodle.js
import React from "react";
import "css-doodle";
export default ({ rule = "" }) => <css-doodle>{rule}</css-doodle>;

3. Import your doodle.js file to the target component

import Doodle from "../doodle";

4. You can now use CSS-Doodle in your React Component!

<Doodle rule={`
    :doodle {
      @grid: 1 / 100000px;
      transform: rotate(-135deg) scale(2);
    }
    background-size: 30px 30px;
    background-image: @doodle(
      @grid: 6x1 / calc(100% + 1px);
      @size: calc(100% - 100% / @I * (@i - 1));
      position: absolute;
      border: 1px solid black;
      background: @pn(
        crimson, darkorange, gold,
        forestgreen, royalblue, 
        rebeccapurple,
      );
    );
  }`
}/>

To use CSS-Doodle, you must put your rule inside the rule prop that comes with your Doodle Component.

Now you can make original CSS Backgrounds like this:

If you are interested in more content, head over to my Medium stories where I post most of my written content. Or head over to broun.fr for my personal portfolio.

Don’t forget to clap!