mirror of
https://github.com/jcreek/Tech-Radar-Editor.git
synced 2026-07-12 18:43:46 +00:00
Joshua CreekTech Radar Editor
A web component that allows users to easily create and edit a Tech Radar.
Who created the Tech Radar?
ThoughtWorks created the Tech Radar concept, and Zalando created the visualization that is popular today.
Building the Component
To build the component, you need to have Node.js installed. Clone the repository and run the following commands:
pnpm install
pnpm build
To get it ready to add to NPM or a CDN, run:
pnpm build
pnpm pack
You can then test the package locally.
To publish the component to NPM, run:
npm login
npm publish
Consume the Component in Plain JavaScript
Include the component in an HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tech Radar Editor</title>
<script type="module" src="./tech-radar-editor.es.js"></script>
</head>
<body>
<tech-radar-editor></tech-radar-editor>
</body>
</html>
Consume the Component in React
In a React project, you can use the web component as you would use any custom HTML element.
First, ensure that the component is imported or included:
// index.js
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
// Import the component
import "tech-radar-editor";
function App() {
return (
<div className="App">
<tech-radar-editor></tech-radar-editor>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
Note: In React, you might need to instruct TypeScript about the custom element. Create a react-app-env.d.ts or a global.d.ts file:
// react-app-env.d.ts
declare namespace JSX {
interface IntrinsicElements {
"tech-radar-editor": any;
}
}