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.jsimport 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!

Software Engineer 💻 at Apple 🍎 in Paris 🇫🇷. Wework Enthusiast