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:

1npm create [email protected] sandpak -- --template react
2
bashCopy

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

1npm i @codesandbox/sandpack-react
2
bashCopy

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

1import React from 'react';
2import { Sandpack } from '@codesandbox/sandpack-react';
3
4export default function App(props) {
5    return (
6        <div className='p-10'>
7            <Sandpack
8                theme="dark"
9                template="react"
10            />
11        </div>
12    );
13}
14
jsxCopy

Template

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

1# ✓ react-ts
2# ✓ angular
3# ✓ vue
4# ✓ vue3
5# ✓ vanilla-ts
6# ✓ vanilla
7
8<Sandpack template="angular" />
9
jsxCopy

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:

1npm i @codesandbox/sandpack-themes
2
bashCopy

Kemudian untuk menggunakannya, kita akan import dia seperti:

1import { Sandpack } from '@codesandbox/sandpack-react';
2import { monokaiPro } from '@codesandbox/sandpack-themes';
3...
4...
5<Sandpack
6    theme={monokaiPro}
7    template="react"
8/>
9
jsxCopy

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

1✓ aquaBlue
2✓ atomDark
3✓ cobalt2
4✓ dracula
5✓ ecoLight
6✓ freeCodeCampDark
7✓ githubLight
8✓ levelUp
9✓ monokaiPro
10✓ nightOwl
11✓ sandpackDark
12
jsxCopy

Jangan lupa import untuk memakai temanya seperti:

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

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.

1<Sandpack
2    template='react'
3    theme={monokaiPro}
4    options={{
5        showNavigator: true,
6        showTabs: true,
7        closableTabs: true,
8        showLineNumbers: true,
9        showInlineErrors: true,
10        wrapContent: true,
11        editorHeight: 590,
12        editorWidthPercentage: 60
13    }}
14/>
15
jsxCopy

Custon Dependencies

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

1<Sandpack
2    template="react"
3    customSetup={{
4        dependencies: {
5            "react-spring": "9.5.5",
6            "react-scripts": "4.0.0",
7        },
8    }}
9/>
10
jsxCopy

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.