React Component Isolator ·

A tool that allows you to visualize React components in an isolated environment.

Quick start

using npm:

npm install -D react-isolator

using yarn:

yarn add --dev react-isolator

Once the package is installed, you can import the library using the import or require approach:

import { ReactIsolator, IsolatedItem } from "react-isolator";

Example

import { ReactIsolator, IsolatedItem } from "react-isolator";

function Button({ label = "" }) {
  return (
    <button type="button" onClick={() => console.log("Button clicked!")}>
      <p>{label}</p>
    </button>
  );
}

export function IsolatedButton() {
  return <Button label="I am a Button!" />;
}

export default Button;

<ReactIsolator>
  <IsolatedItem name="Button" element={<Button />} />
</ReactIsolator>;

Alternatively, the isolated code can be located in its own file:

button.isolated.jsx

import Button from ../components/Button;

function IsolatedButton() {
  return <Button label='I am a Button!' />
}

export default IsolatedButton;

Components

ReactIsolator

The main component of the tool can be conceptualized as a list to visualize every child component.

IsolatedItem

The component that holds the isolated element to visualize.

Props

• name: Label to identify the component in the visualizer.
• jsxElement: The component to render.

License

React component library is supported under MIT licensed.