0.1.10 • Published 2 years ago

react-isolator v0.1.10

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

React Component Isolator · GitHub license npm version

As the name indicates, this is a tool that allows you to visualized 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 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

Main component of the tool, can be conceptualized as a list to visualize every child component.

IsolatedItem

Component that holds the isolated element to visualize.

Props

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

License

React component library is supported under MIT licensed.

0.1.10

2 years ago

0.1.9

2 years ago

0.1.8

2 years ago

0.1.7

2 years ago

0.1.6

2 years ago

0.1.5

2 years ago

0.1.4

2 years ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago