@devtools-ds/console
v1.2.1
Published
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.
Downloads
434
Readme
@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):
This project follows the all-contributors specification. Contributions of any kind welcome!