React No-Code CSS Builder

A simple React component that allows you to generate CSS visually without writing code. It provides a no-code interface for designing CSS styles and outputs both processed and raw CSS.

Demo

import React from "react";
import ReactNoCodeCssBuilder from "react-no-code-css-builder";

export default function App() {
  const handleResults = (css, rawCss) => {
    console.log(css, rawCss);
  };

  return (
    <ReactNoCodeCssBuilder
      defaultValue={{ color: "red" }}
      handleResults={handleResults}
    />
  );
}

Features

• Drag-and-drop style builder (if implemented in ReactNoCodeCssBuilder)
• Outputs both formatted CSS and raw CSS
• Supports default values for initial styling
• Easy integration into any React project

Installation

npm i react-no-code-css-builder"
# or
yarn react-no-code-css-builder"

Usage

Basic Usage

import React from "react";
import ReactNoCodeCssBuilder from "./ReactNoCodeCssBuilder";

export default function App() {
  const handleResults = (css, rawCss) => {
    console.log("Formatted CSS:", css);
    console.log("Raw CSS Object:", rawCss);
  };

  return (
    <ReactNoCodeCssBuilder
      defaultValue={{ color: "blue", fontSize: "16px" }}
      handleResults={handleResults}
    />
  );
}

Props

• defaultValue (object): Initial CSS properties to prefill the builder. Example:

  { color: "red", fontSize: "14px", backgroundColor: "yellow" }

• handleResults (function): Callback function that receives two arguments:

  1. css (string): Formatted CSS string ready to use.
  2. rawCss (object): Raw CSS object for further manipulation.

  Example:

  const handleResults = (css, rawCss) => {
    console.log("Formatted CSS:", css);
    console.log("Raw CSS Object:", rawCss);
  };

Example Output

If the user sets:

{ color: "red", fontSize: "16px" }

handleResults might log:

Formatted CSS: "color: red; font-size: 16px;"
Raw CSS Object: { color: "red", fontSize: "16px" }