Panduan Live Coding di Browser Sendiri

Mungkin sebelumnya Anda sering menggunakan yang namanya CodeSandbox, CodePen, dan lain semacam nya. Tetapi, bagaimana jika kita belajar bagaimana cara membuat nya.

¶Sandpack

Sandpack adalah React komponen yang memberikan semacam wrapper yang dapat diedit dan berjalan di browser kita sendiri. Sandpack ini sendiri dibangun oleh CodeSanbox, maka oleh karena itu, Sandpack ini juga mengizinkan kita untuk menggunakan / embed komponen yang pernah kita buat di CodeSanbox ke dalam aplikasi kita.

¶Mari Kita Mulai

Karena sandpack adalah komponen react, maka kita akan install react terlebih dahulu. Untuk case ini, saya akan menggunakan Vite.js, buka terminal Anda dan jalankan perintah berikut ini:

npm create vite@latest sandpak -- --template react

Setelah itu, buka folder nya dari terminal kita dengan melakukan cd sandpack. Kemudian kita akan langsung sandpack nya dengan perintah seperti ini:

npm i @codesandbox/sandpack-react

Setelah itu, buka project ini di browser Anda, dan buka file App.jsx. Kemudian, masukkan sandpack di komponen ini seperti:

import React from 'react';
import { Sandpack } from '@codesandbox/sandpack-react';

export default function App(props) {
    return (
        <div className='p-10'>
            <Sandpack
                theme="dark"
                template="react"
            />
        </div>
    );
}

¶Template

Untuk template, Anda bisa pilih sesuai yang telah diberikannya. Berikut adalah list dari template nya:

# ✓ react-ts
# ✓ angular
# ✓ vue
# ✓ vue3
# ✓ vanilla-ts
# ✓ vanilla

<Sandpack template="angular" />

¶Tema

Untuk temanya, tentu Anda bisa ganti menggunakan "dark" / "light", tetapi sepertinya Anda ingin lebih, Anda mungkin berfikir entah ingin memakai github, atau pun monokaiPro. Baik, untuk melakukan itu, kita bisa install daftar tema untuk sandpack nya.

Buka terminal Anda kemali, dan instal tema nya dengan perintah berikut ini:

npm i @codesandbox/sandpack-themes

Kemudian untuk menggunakannya, kita akan import dia seperti:

import { Sandpack } from '@codesandbox/sandpack-react';
import { monokaiPro } from '@codesandbox/sandpack-themes';
...
...
<Sandpack
    theme={monokaiPro}
    template="react"
/>

Untuk temanya dari sanpack-themes itu ada 11, mungkin nanti diperbarui lagi. Untuk saat ini, berikut ini adalah list yang bisa dipakai.

✓ aquaBlue
✓ atomDark
✓ cobalt2
✓ dracula
✓ ecoLight
✓ freeCodeCampDark
✓ githubLight
✓ levelUp
✓ monokaiPro
✓ nightOwl
✓ sandpackDark

Jangan lupa import untuk memakai temanya seperti:

import { sandpackDark } from '@codesandbox/sandpack-themes';

¶Custom UI

Mungkin Anda berfikir, jika tampilan yang diberikan kurang mantap, dan memang bisa saja ingin mengganti posisinya, untuk melakukan itu Anda bisa melakukannya pada props options.

<Sandpack
    template='react'
    theme={monokaiPro}
    options={{
        showNavigator: true,
        showTabs: true,
        closableTabs: true,
        showLineNumbers: true,
        showInlineErrors: true,
        wrapContent: true,
        editorHeight: 590,
        editorWidthPercentage: 60
    }}
/>

¶Custon Dependencies

Jika Anda berfikir ingin memakai custom dependencies seperti misalnya react-spring, maka Anda bisa melakukannya seperti:

<Sandpack
    template="react"
    customSetup={{
        dependencies: {
            "react-spring": "9.5.5",
            "react-scripts": "4.0.0",
        },
    }}
/>

Semoga informasi ini bermanfaat untuk Anda, dan jangan lupa untuk mempelajari Sanpack ini lebih dalam lagi dengan mengunjungi langsung disini. Saya Irsyad, dan saya akan melihat Anda lagi di artikel selanjutnya.