sandpack demos

#markdown

jerrywu001

创建时间：2023-09-01 07:03:01

templates

'angular' | 'react' | 'react-ts' | 'vanilla' | 'vanilla-ts' | 'vue' | 'vue3' | 'svelte' | 'solid';

entry file path

vanilla: 'src/index.js'

vanilla-ts: 'src/index.ts'

angular: 'src/app/app.component.ts'

react: 'App.js'

react-ts: 'App.tsx'

vue: 'src/App.vue'

vue3: 'src/App.vue'

svelte: 'index.js'

solid: 'App.tsx'

Normal

:::sand-box{template=react-ts}
\`\`\`js App.tsx
console.log('Hello');

export default function App() {
  return (
    <div>Hello world</div>
  );
}
\`\`\`
:::

console.log('Hello');

export default function App() {
  return (
    <div>Hello world</div>
  );
}

Open Sandbox

Global ReadOnly

:::sand-box{template=react-ts read-only show-read-only}
\`\`\`js App.tsx
export default function App() {
  return (
    <div>Hello world</div>
  );
}
\`\`\`
:::

export default function App() {
  return (
    <div>Hello world</div>
  );
}

Read-only

Open Sandbox

Custom files

:::sand-box{template=react}
\`\`\`js App.js [active]
import Item from './Item.js';

export default function App() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}
\`\`\`

\`\`\`js Item.js
export default function Item({ name, isPacked }) {
  return <li className="item">{name}</li>;
}
\`\`\`
:::

import Item from './Item.js';

export default function App() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          isPacked={true}
          name="Space suit"
        />
        <Item
          isPacked={true}
          name="Helmet with a golden leaf"
        />
        <Item
          isPacked={false}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}

Open Sandbox

Custom with readonly

:::sand-box{template=react}
\`\`\`js App.js
import Gallery from './Gallery.js';

export default function App() {
  return (
    <Gallery />
  );
}
\`\`\`

\`\`\`js Gallery.js [active] [readonly]
// this file is readOnly

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}
\`\`\`
:::

// this file is readOnly

function Profile() {
  return (
    <img
      src="https://i.imgur.com/QIrZWGIs.jpg"
      alt="Alan L. Hart"
    />
  );
}

export default function Gallery() {
  return (
    <section>
      <h1>Amazing scientists</h1>
      <Profile />
      <Profile />
      <Profile />
    </section>
  );
}

Open Sandbox

custom with hidden

:::sand-box{template=react}
\`\`\`js Clock.js [active]
export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}
\`\`\`

\`\`\`js App.js [hidden]
import { useState, useEffect } from 'react';
import Clock from './Clock.js';

function useTime() {
  const [time, setTime] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => {
      setTime(new Date());
    }, 1000);
    return () => clearInterval(id);
  }, []);
  return time;
}

export default function App() {
  const time = useTime();
  const [color, setColor] = useState('lightcoral');
  return (
    <div>
      <p>
        Pick a color:{' '}
        <select value={color} onChange={e => setColor(e.target.value)}>
          <option value="lightcoral">lightcoral</option>
          <option value="midnightblue">midnightblue</option>
          <option value="rebeccapurple">rebeccapurple</option>
        </select>
      </p>
      <Clock color={color} time={time.toLocaleTimeString()} />
    </div>
  );
}
\`\`\`
:::

export default function Clock({ color, time }) {
  return (
    <h1 style={{ color: color }}>
      {time}
    </h1>
  );
}

Open Sandbox

closableTabs

:::sand-box{template=react closable-tabs}
\`\`\`js App.js
export default function App() {
  return (
    <h1>Hello World!</h1>
  );
}
\`\`\`

\`\`\`js file1.js
// file1
\`\`\`

\`\`\`js file2.js
// file2
\`\`\`
:::

export default function App() {
  return (
    <h1>Hello World!</h1>
  );
}

Open Sandbox

This sandbox doesn’t work because the root component is not exported

:::sand-box{template=react}
\`\`\`js
function App() {
  return null;
}
\`\`\`
:::

function App() {
  return null;
}

Open Sandbox