@devtools-ds/console

@devtools-ds/console

The Console component emulates the familiar JavaScript REPL experience seen in many browsers. You can customize the function that executes the code, as well as how results are displayed.

Installation

npm i @devtools-ds/console
# or with yarn
yarn add @devtools-ds/console

Then to use the component in your code just import it!

import { Console } from "@devtools-ds/console";

Usage

Render the console, and pass a function to execute an expression. The result of the execution will display using the ObjectInspector.

<Console execute={() => {}} />

Custom Rendering

You can also customize how the results are displayed. Provide a component with a result property and it will be used instead.

In browsers, the console displays results using an ObjectInspector. This package exports a ConsoleResultInspector component which mirrors that behavior using @devtools-ds/object-inspector. We don't set it as the default resultComponent for performance reasons; that would cause @devtools-ds/object-inspector to always be imported even if you don't use it.

import {
  Console,
  ConsoleExpression,
  ConsoleResultInspector,
  ConsoleResultProps,
} from "@devtools-ds/console";

/** A custom result component */
export const ConsoleResultCustom = ({ result }: ConsoleResultProps) => {
  return <div>{result}</div>;
};

// Use the custom result component
<Console resultComponent={ConsoleResultCustom} />

// Use @devtools-ds/object-inspector
<Console resultComponent={ConsoleResultInspector} />

Controlled History

By default, the Console component will automatically maintain state for you. If you'd like to control it yourself, you can provide your own history.

  const [history, setHistory] = React.useState<ConsoleExpression[]>([]);

  return (
    <Console
      history={history}
      execute={callback((expression: string) => {
        const run: ConsoleExpression = {
          id: history.length.toString(),
          expression,
          result: expression,
        };
        setHistory((oldHistory) => [...oldHistory, run]);
      })}
    />
  );

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Adam Dierkens 💻 📖 🎨

Tyler Krupicka 💻 📖 🎨 🚇 💡 ⚠️

Andrew Lisowski 💻

This project follows the all-contributors specification. Contributions of any kind welcome!