Description:
This is the rewritten version of the react-animated-term component, which allows you to render animated terminals in your app.
How to use it:
1. Install & import the component.
# Yarn $ yarn add @nitric/react-animated-term # NPM $ npm i @nitric/react-animated-term
// Import import React from 'react'; import Terminal from '@nitric/react-animated-term'; // Stylesheet import '@nitric/react-animated-term/css/styles.css';
2. Add the terminal component to the app and define your own commands.
const myCMD = [
{
text: 'ls',
color: 'blue',
cmd: true,
},
{
text: 'index.js package.json node_modules',
cmd: false,
},
{
text: 'cd',
cmd: true,
},
];
const MyComponent = () => {
return <Terminal lines={myCMD} interval={50} />;
};3. With loading & framed animations.
const spinner = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
const myCMD = [
{
text: 'node example.js',
cmd: true,
delay: 80,
},
{
text: 'Loaded app',
cmd: false,
repeat: true,
repeatCount: 5,
frames: spinner.map(function (spinner) {
return {
text: spinner + ' Loading app',
delay: 40,
};
}),
},
{
text: 'cd',
cmd: true,
},
];
const MyComponent = () => {
return <Terminal lines={termLines} interval={50} />;
};4. Available component props.
white?: boolean; height?: number; interval?: number; code?: boolean; onReplay?: () => void; completed?: boolean; replay?: boolean;
