chore: add some example

Qovery · Jul 18, 2024 · 2b638c4 · 2b638c4
1 parent b709219
commit 2b638c4
Show file tree

Hide file tree

Showing 15 changed files with 5,982 additions and 12 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,2 @@
 node_modules
-dist
-example
+dist
diff --git a/README.md b/README.md
@@ -1,27 +1,81 @@
-<h1>XTerm.js for React</h1>
+# XTerm.js for React
 
-<p>
-    A React library to use the powerful of <a href="https://github.com/xtermjs/xterm.js" target="_blank">Xterm.js</a>
-</p>
-<p>
-    <a href="https://www.npmjs.com/package/react-xtermjs"><img alt="npm version" src="https://img.shields.io/npm/v/react-xtermjs.svg"></a>
-   <a href="https://www.npmjs.com/package/react-xtermjs"><img alt="npm download" src="https://img.shields.io/npm/dw/react-xtermjs"></a>
-</p>
-<br />
+A React library to use the powerful of [Xterm.js](https://github.com/xtermjs/xterm.js)
+
+[![npm version](https://img.shields.io/npm/v/react-xtermjs.svg)](https://www.npmjs.com/package/react-xtermjs)
+[![npm download](https://img.shields.io/npm/dw/react-xtermjs)](https://www.npmjs.com/package/react-xtermjs)
 
 ## Getting Started
 
 ### Installation
 
 NPM:
 
+```sh
     npm install react-xtermjs
+```
 
 Yarn:
 
+```sh
     yarn add react-xtermjs
+```
+
+### Usage
+
+This package provides two main ways to use the XTerm component: using the useXTerm hook and the XTerm component.
+
+#### Using the `useXTerm`` hook
+
+The useXTerm hook is a flexible way to integrate XTerm.js with fine-grained control over the terminal instance.
+
+**Example**
+
+```js
+import React, { useRef, useEffect } from 'react'
+import { useXTerm } from 'react-xtermjs'
+
+const MyTerminal = () => {
+  const { instance, ref } = useXTerm()
+  instance?.writeln('Hello from react-xtermjs!')
+  instance?.onData((data) => instance?.write(data))
+
+  return <div ref={ref} style={{ width: '100%', height: '100%' }} />
+}
+```
+
+#### Using the `XTerm`` component
+
+The XTerm component offers a higher-level abstraction, making it easier to integrate the terminal with minimal setup.
+
+**Example**
+
+```js
+import React from 'react'
+import { XTerm } from 'react-xtermjs'
+
+const MyTerminal = () => {
+  const onData = (data) => {
+    console.log(`Received data: ${data}`)
+  }
+
+  const onResize = (cols, rows) => {
+    console.log(`Terminal resized to ${cols} columns and ${rows} rows`)
+  }
+
+  return (
+    <XTerm
+      onData={onData}
+      onResize={onResize}
+      options={{ cursorBlink: true }}
+      style={{ width: '100%', height: '100%' }}
+    />
+  )
+}
+```
+
+For a full list of available parameters, refer to the XTerm.js documentation: [XTerm.js Docs](https://xtermjs.org/docs/).
 
-<br />
 <hr />
 
 <p>react-xtermjs is initiated and maintained by <a href="https://qovery.com" target="blank">Qovery</a>.</p>
diff --git a/example/.eslintrc.cjs b/example/.eslintrc.cjs
@@ -0,0 +1,21 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react/jsx-no-target-blank': 'off',
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}
diff --git a/example/.gitignore b/example/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,3 @@
+# Example `react-xtermjs`
+
+Simple example of using the library.
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>XTerm.js for React</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Example `react-xtermjs`

		Simple example of using the library.