react-style-visualizer

A React component visualization tool that helps you inspect and debug component styles by highlighting className regions and style mappings

Installation

To install the package, run:

yarn add react-style-visualizer

Usage

Default Example

import { StylePreviewer } from "react-style-visualizer";

const App = () => {
  const compositionClassInfo = {
    "MyComponent.Title": {
      className: "",
    },
    "MyComponent.Description": {
      className: "",
    },
    "MyComponent.Content": {
      className: "",
    },
    CompositionComponent: {
      className: "",
      classNames: {
        title: "",
        content: "",
      },
    },
  } as const;

  return (
    <StylePreviewer classInfo={compositionClassInfo}>
      {(keys) => (
        <MyComponent>
          <MyComponent.Title key={keys["MyComponent.Title"]}>
            title
          </MyComponent.Title>
          <MyComponent.Description key={keys["MyComponent.Description"]}>
            description
          </MyComponent.Description>
          <MyComponent.Content key={keys["MyComponent.Content"]}>
            <CompositionComponent key={keys.CompositionComponent} />
          </MyComponent.Content>
        </MyComponent>
      )}
    </StylePreviewer>
  );
};

Custom Example(Headless)

export const CustomExample = () => {
  return (
    <>
      <StylePreviewer.Provider
        element={(keys) => (
          <>
            <MyComponent>
              <MyComponent.Title key={keys["MyComponent.Title"]}>
                title
              </MyComponent.Title>
              <MyComponent.Description key={keys["MyComponent.Description"]}>
                description
              </MyComponent.Description>
              <MyComponent.Content key={keys["MyComponent.Content"]}>
                <CompositionComponent key={keys.CompositionComponent} />
              </MyComponent.Content>
            </MyComponent>
          </>
        )}
        classInfo={SampleClassInfo}
      >
        <>
          <StylePreviewer.HighlightedStyleElement />
          <StylePreviewer.ClassController>
            {({
              classInfo,
              selectedClass,
              updateClassState,
              resetClassState,
            }) => (
              <div>
                {Object.entries(classInfo).map(([key, value]) => (
                  <div
                    key={key}
                    onMouseEnter={() =>
                      updateClassState({
                        elementKey: key,
                        type: "className",
                      })
                    }
                    onMouseLeave={resetClassState}
                    style={{
                      backgroundColor:
                        selectedClass?.elementKey === key ? "#f0f0f0" : "#fff",
                    }}
                  >
                    {key}
                  </div>
                ))}
              </div>
            )}
          </StylePreviewer.ClassController>
        </>
      </StylePreviewer.Provider>
    </>
  );
};

---

Component Description

When using react-style-visualizer, it's crucial to map the key values correctly to the class names defined in classInfo.

This ensures that the styles are applied and visualized correctly.

StylePreviewer

• The StylePreviewer component provides the base UI for visualizing and interacting with component styles.

Prop	Type	Description
children	React.ReactNode	The child components to be rendered within the StylePreviewer context.
classInfo	Record<string, ClassInfo>	An object mapping component keys to their respective class information.
accentClassName	string	The class name to be used for the highlighted style.

StylePreviewer.Provider

• The StylePreviewer.Provider component is used to provide the context for the StylePreviewer component.

Prop	Type	Description
children	React.ReactNode	The child components to be rendered within the StylePreviewer context.
classInfo	Record<string, ClassInfo>	An object mapping component keys to their respective class information.

StylePreviewer.HighlightedStyleElement

• The StylePreviewer.HighlightedStyleElement component applies accent styles to visually highlight the selected element.

Prop	Type	Description
accentClassName	string	class name to be used for the highlighted style.

• The StylePreviewer.Provider component is used to provide the context for the StylePreviewer component.

StylePreviewer.ClassController

• The StylePreviewer.ClassController component is used to control the class state of the StylePreviewer component.

Prop	Type	Description
mode	"hover" | "click"	Indicates the current interaction mode. "hover" changes styles on hover, while "click" changes styles on click.
classInfo	Record<string, ClassInfo>	A mapping of component keys to their respective class information, used to determine style application.
selectedClass	StylePreviewerState["classState"]	Represents the current state of the selected class, including the selected element and class type.
updateClassState	(props: ClassNameState | ClassNamesState) => void	A function to update the class state, allowing dynamic changes to the styling of components.
resetClassState	() => void	A function to reset the class state to its default, clearing any applied styles.

StylePreviewer.ClassController>
  {({ mode, classInfo, selectedClass, updateClassState, resetClassState }) => (
    <div>
      {/* Render your UI components here, using the provided functions and state */}
    </div>
  )}
</StylePreviewer.ClassController>

StylePreviewer.ModeToggleController

• The StylePreviewer.ModeToggleController component is used to toggle the interaction mode of the StylePreviewer component.

Prop	Type	Description
children	React.ReactNode	The child components to be rendered within the StylePreviewer context.

<StylePreviewer.ModeToggleController>
  {({ mode, toggleMode }) => (
    <div>
      {/* Render your UI components here, using the provided functions and state */}
    </div>
  )}
</StylePreviewer.ModeToggleController>

Contributing

We warmly welcome pull requests and encourage you to use GitHub issues for submitting feature requests and reporting bugs.