diff --git a/README.md b/README.md
index 8873512..775ae4e 100644
--- a/README.md
+++ b/README.md
@@ -92,6 +92,7 @@ https://www.agney.dev/blog/introducing-playground
| transformJs | Transform the JavaScript using Babel. This is required if you want bare module imports | false | false |
| presets | Array of presets you want Babel to transform. This works only if transformJs is true. Eg. `["react", "es2015"]` | | false |
| theme | Pass in the theme variables to customise the appearance | [Our Theme](https://github.com/agneym/playground/blob/master/playground/src/utils/theme.ts) | false |
+| showConsole | Controls the visibility of the console tab. Possible values: `true`, `false` | `true` | false |
### Format for initial snippet
diff --git a/example/src/index.js b/example/src/index.js
index 32b8ea7..18bbd37 100644
--- a/example/src/index.js
+++ b/example/src/index.js
@@ -22,6 +22,7 @@ const app = html\`
render(app, document.getElementById('app'));
`,
};
+
return (
);
diff --git a/playground/src/Playground.tsx b/playground/src/Playground.tsx
index 501bad0..bb8e840 100644
--- a/playground/src/Playground.tsx
+++ b/playground/src/Playground.tsx
@@ -31,6 +31,7 @@ interface IProps {
id?: string;
theme?: DefaultTheme;
mode: ColorMode;
+ showConsole?: boolean;
}
const Playground: FC = ({
@@ -42,6 +43,7 @@ const Playground: FC = ({
presets = [],
theme,
mode = "light",
+ showConsole = true,
}) => {
const [snippet, setSnippet] = useState(initialSnippet);
const id = useId(userId) as string;
@@ -73,6 +75,7 @@ const Playground: FC = ({
defaultTab={defaultResultTab}
transformJs={transformJs}
presets={presets}
+ showConsole={showConsole}
/>
)}
/>
diff --git a/playground/src/Result/index.tsx b/playground/src/Result/index.tsx
index be79680..ee52057 100644
--- a/playground/src/Result/index.tsx
+++ b/playground/src/Result/index.tsx
@@ -18,6 +18,7 @@ interface IProps {
transformJs: boolean;
presets: string[];
width: number;
+ showConsole?: boolean;
}
const Result: FC = ({
@@ -27,14 +28,17 @@ const Result: FC = ({
defaultTab,
transformJs,
width,
+ showConsole = true,
}) => {
const [logs, setLogs] = useState([]);
const tabs: Readonly[]> = useMemo(
() => [
{ name: "Result", value: "result" as IResultTabs },
- { name: "Console", value: "console" as IResultTabs },
+ ...(showConsole
+ ? [{ name: "Console", value: "console" as IResultTabs }]
+ : []),
],
- []
+ [showConsole]
);
useEffect(() => {
function waitForMessage() {