custom-terminal
v0.0.6
Published
<h1 align="center">Welcome to custom-terminal 👋</h1> <p> <a href="https://www.npmjs.com/package/custom-terminal" target="_blank"> <img alt="Version" src="https://img.shields.io/npm/v/custom-terminal.svg"> </a> <a href="#" target="_blank"> <
Downloads
14
Maintainers
Readme
terminal in browser, can custom answer according input command
Install
npm install custom-terminal
Usage
// App.tsx
import { Terminal, Banner } from 'custom-terminal'
import 'custom-terminal/dist/style.css'
import React from 'react'
const App = () => {
const commands = [
{
name: 'test1',
value: async () => (
<p
style={{ color: 'yellow' }}
onClick={() => {
alert('haha')
}}
>
This is test1 text
</p>
),
},
{
name: 'test2',
value: async () =>
new Array(10).fill(0).map((v, k) => (
<p style={{ color: 'yellow' }} key={k}>
This is test2 text
</p>
)),
},
{
name: 'clear',
value: async () => (
<p
style={{ color: 'yellow' }}
onClick={() => {
alert('haha')
}}
>
This is summary text
</p>
),
},
{
name: 'commandNotFound',
value: async (args: string[]) => {
return (
<p key={'uuid'} className='error'>
-error: {args.join(' ')}: not found!!!
</p>
)
},
},
]
return (
<div>
<Banner cmp={testBanner} />
<Terminal commands={commands} />
</div>
)
}
const testBanner = () => {
return (
<div>
<p className='index text-color'>Welcome to The custom CLI Tool</p>
<p className='text-color'>
Type
<span className='command'>{' help ---'}</span>
or
<span className='command'>{' -h '}</span>
to see all available commands
</p>
</div>
)
}
export default App
/* App.css */
body {
padding: 16px;
margin: 0;
background: #211d1b;
}
Author
👤 happyferry
Show your support
Give a ⭐️ if this project helped you!
This README ❤️ by happyferry