react-markdown-table - npm Package Compare versions

Comparing version 0.0.1 to 0.0.11

dist/CopyIcon.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"> <polygon fill="var(--ci-primary-color, currentColor)" points="408 432 376 432 376 464 112 464 112 136 144 136 144 104 80 104 80 496 408 496 408 432" class="ci-primary"/> <path fill="var(--ci-primary-color, currentColor)" d="M176,16V400H496V153.373L358.627,16ZM464,368H208V48H312V200H464Zm0-200H344V48h1.372L464,166.627Z" class="ci-primary"/> </svg>

dist/index.css

+.markdown-table-container {
+  position: relative;
+  background-color: white;
+  text-align: center;
+}
+
+.copy-button,
+.copy-button-view {
+  align-items: center;
+  padding: 4px;
+  background-color: transparent;
+  border: none;
+  cursor: pointer;
+  transition: transform 0.15s ease-in-out;
+  z-index: 1;
+}
+
+.copy-button-view {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.copy-icon {
+  width: 20px;
+  height: 20px;
+  margin-left: 4px;
+  vertical-align: middle;
+}
+
+.copy-button:hover,
+.copy-button-view:hover {
+  transform: translate(0.35px, -0.35px);
+  opacity: 0.6;
+}
+
+.copy-button.clicked:after,
+.copy-button-view.clicked:after {
+  content: "Copied!";
+  position: absolute;
+  top: -30px;
+  right: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  color: rgba(255, 255, 255, 0.9);
+  padding: 4px 8px;
+  border-radius: 4px;
+  transition: opacity 1s ease-in-out;
+}
+
+.markdown-table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+.markdown-table th,
+.markdown-table td {
+  padding: 2px;
+  border: 1px solid #ddd;
+}
+
+.markdown-table th {
+  background-color: #f2f2f2;
+  font-weight: bold;
+}

dist/index.d.ts

+import React from 'react';
+import './index.css';
+type TableCell = string | number;
+type TableRow = TableCell[];
+interface Props {
+    data: TableData;
+    view?: boolean;
+}
+type TableData = TableRow[];
+declare const MarkdownTable: React.FC<Props>;
+export default MarkdownTable;

dist/index.js

+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const CopyIcon_svg_1 = __importDefault(require("./CopyIcon.svg"));
+require("./index.css");
+const MarkdownTable = ({ data, view = true }) => {
+    const copyToClipboard = () => {
+        const markdownTable = generateMarkdownTable();
+        navigator.clipboard.writeText(markdownTable).then(() => {
+            const button = document.getElementById('copy-button');
+            if (button) {
+                button.classList.add('clicked');
+                setTimeout(() => {
+                    button.classList.remove('clicked');
+                }, 1000);
+            }
+        });
+    };
+    const generateMarkdownTable = () => {
+        const rows = data.map(row => `| ${row.join(' | ')} |`).join('\n');
+        const headerRow = `| ${data[0].map(() => '--').join(' | ')} |`;
+        return `${headerRow}\n${rows}`;
+    };
+    return (react_1.default.createElement("div", null,
+        view && (react_1.default.createElement("div", { className: "markdown-table-container" },
+            react_1.default.createElement("button", { id: "copy-button", className: "copy-button-view", onClick: copyToClipboard },
+                react_1.default.createElement("img", { className: "copy-icon", src: CopyIcon_svg_1.default, alt: "Copy" })),
+            react_1.default.createElement("table", { className: "markdown-table" },
+                react_1.default.createElement("thead", null,
+                    react_1.default.createElement("tr", null, data[0].map((header, index) => (react_1.default.createElement("th", { key: index }, header))))),
+                react_1.default.createElement("tbody", null, data.slice(1).map((row, rowIndex) => (react_1.default.createElement("tr", { key: rowIndex }, row.map((cell, cellIndex) => (react_1.default.createElement("td", { key: cellIndex }, cell)))))))))),
+        !view && (react_1.default.createElement("button", { id: "copy-button", className: "copy-button", onClick: copyToClipboard },
+            react_1.default.createElement("img", { className: "copy-icon", src: CopyIcon_svg_1.default, alt: "Copy" })))));
+};
+exports.default = MarkdownTable;

package.json

 {
   "name": "react-markdown-table",
-  "version": "0.0.1",
+  "version": "0.0.11",
   "description": "React component library for generating and previewing markdown tables",
@@ -8,2 +8,3 @@ "main": "dist/index.js",
   "scripts": {
+    "prepack": "npm run build",
     "build": "rm -rf dist && mkdir dist && tsc && cp ./src/index.css ./dist && cp ./src/CopyIcon.svg ./dist"
@@ -10,0 +11,0 @@ },

README.md

@@ -1,4 +0,4 @@
-# MarkdownTable
+# React Markdown Table
 
-MarkdownTable is a React component library for generating and previewing markdown tables.
+react-markdown-table is a React component library for generating and previewing markdown tables.
 
@@ -5,0 +5,0 @@ ## Installation

No alert changes

Improved metrics

Total package byte prevSize

10229

68.93%

Number of package files

11

57.14%

Lines of code

248

72.22%

No dependency changes