React IDE Component

React IDE Component is lighweight IDE component for react that has been included with typewritting effect for animation.

Dependecies

This components use:

• GSAP for animation that have impressive performance
• highlight.js for rich syntax highlighter and detect the language
• html-react-parser for parsing HTML into React elements

Installation

If you're using npm, in the command prompt run:

npm install react-ide-component --save

If you're using yarn, run:

yarn add react-ide-component

Usage

Import the module

import IdeComponent from 'react-ide-component'

Prepare datas to send it as props, this example use React Icons as icon. you can use your own svg / image icon here

const ideData = [
  {
    id: 'tab1',
    icon: <ReactSvg size='100%' />
    filename: 'index.tsx',
    content: 'console.log("test")',
    lang: 'typescript'
  },
]

Datas Type

type for datas object

Property	Type	Required	Default	Description
id	string	true	null	tab's ids that you can use for your own needs
icon	JSX.Element	true	null	you can use your own svg, png as icon logo that representation tile extention / code language
filename	string	true	null	filename and extention file that will shown as tab's label example: 'index.js'
content	string	true	null	it will be use as code text, enter/break line inside string didnt not work here. if you want to break line code content use <br> instead.
lang	string	true	null	language name. example javascript, php, java, python, etc you can serach list language available from highlight.js languages list

Then insert component and datas like this

<IdeComponent datas={ideData} />

Might be your full code look like this

import React from "react";
import IdeComponent from 'react-ide-component'
import { ReactSvg, JsSvg } from '../svg/ReactSvg'

const ideData = [
  {
    id: 'tab1',
    icon: <ReactSvg size='100%' />
    filename: 'index.tsx',
    content: 'console.log("test")',
    lang: 'typescript'
  },
  {
    id: 'tab2',
    icon: <JsSvg size='100%' />
    filename: 'index.jsx',
    content: 'console.log("test")',
    lang: 'javascript'
  },
]


function App() {
  return (
    <div>
      <IdeComponent datas={ideData} />
    </div>
  )
}

Props

Property	Type	Required	Default	Description
datas	TabDataType[]	true	null	Array of object that representating tab ide, icon, filename, code, and language
mode	dark or light	false	dark	Mode for IDE color between dark and light, default is `dark