ANSI to React

Author: rgbkrk

index.js

@@ -1 +1,35 @@
-console.log('soon');
+import React from 'react';
+
+const ansiToJSON = require('ansi-to-json');
+
+function ansiJSONtoStyleBundle(ansiBundle) {
+  const style = {};
+  if(ansiBundle.bg) {
+    style.backgroundColor = `rgb(${ansiBundle.bg})`;
+  }
+  if(ansiBundle.fg) {
+    style.color = `rgb(${ansiBundle.fg})`;
+  }
+  return {
+    content: ansiBundle.content,
+    style,
+  };
+}
+
+function ansiToInlineStyle(text) {
+  return ansiToJSON(text).map(ansiJSONtoStyleBundle)
+}
+
+function inlineBundleToReact(bundle, key) {
+  return <span style={bundle.style} key={key}>{bundle.content}</span>
+}
+
+export default function Ansi(props) {
+  const { text } = props;
+  return (
+    <code>
+      {ansiToInlineStyle(text).map(inlineBundleToReact)}
+    </code>
+  )
+}
+

package.json

@@ -13,8 +13,6 @@
   "author": "Kyle Kelley <[email protected]>",
   "license": "MPL-2.0",
   "dependencies": {
-    "ansi-parser": "^3.2.0",
-    "ansi-to-html": "^0.3.0",
-    "entities": "^1.1.1"
+    "ansi-to-json": "^1.0.0"
   }
 }