1.0.30 • Published 2 years ago
@devbookhq/ui v1.0.30
Devbook UI
Devbook UI is a React UI library.
Installation
npm install @devbookhq/ui
Usage
Available components:
Editor
import { Editor, Language } from '@devbookhq/ui'
export default function ExampleEditor() {
return (
<Editor
filename="index.js"
language={Language.js}
initialContent='console.log("world")'
onContentChange={(content) => console.log(content)}
isReadonly={false}
lightTheme={true}
/>
)
}
Supported languages:
- JS/JSX
- TS/TSX
- Shell
- SQL
- Python
Iframe
import { Iframe } from '@devbookhq/ui'
export default function ExampleIframe() {
return (
<Iframe
url="https://..."
lightTheme={false}
height="150px"
/>
)
}
Output
import { Output } from '@devbookhq/ui'
export default function ExampleOutput() {
return (
<Output
stdout={['out1', 'out2']}
stderr={['err1']}
lightTheme={false}
height="150px"
/>
)
}
Filesystem
import { Filesystem } from '@devbookhq/ui'
import { useDevbook } from '@devbookhq/sdk'
export default function ExampleFilesystem() {
const devbook = useDevbook({ env: 'your-vm-id', config: { domain: 'shared.usedevbook.com' }})
return (
<Filesystem
devbook={devbook}
lightTheme={false}
height="150px"
initialFilepath="/README.md"
/>
)
}
Terminal
import { Terminal, TerminalHandle } from '@devbookhq/ui'
import { useDevbook } from '@devbookhq/sdk'
export default function ExampleTerminal() {
const devbook = useDevbook({ env: 'your-vm-id', config: { domain: 'shared.usedevbook.com' }})
const terminalRef = useRef<TerminalHandle>(null)
function runEcho() {
if (devbook.status !== DevbookStatus.Connected) return
if (!terminalRef.current) return
// You can programatically control the terminal like this
terminalRef.current.handleInput('echo Hello\n')
terminalRef.current.focus()
}
return (
<Terminal
// This method is run after the terminal connects to the VM
onStart={(handler) => {
handler.handleInput('echo Started\n')
}}
ref={terminalRef}
onStart={}
devbook={devbook}
lightTheme={false}
height="200px"
/>
)
}
Example projects
1.0.29
2 years ago
1.0.28
2 years ago
1.0.30
2 years ago
1.0.26
2 years ago
1.0.25
2 years ago
1.0.27
2 years ago
0.1.2
2 years ago
0.1.1
2 years ago
1.0.20
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.15
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago