custom-terminal v0.0.6

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