react-markdown-table - npm Package Compare versions

Comparing version

+1

-1

package.json

		{
		"name": "react-markdown-table",
		"version": "1.0.0",
		"version": "1.0.1",
		"description": "React component library for generating and previewing markdown tables",
		@@ -5,0 +5,0 @@ "main": "dist/index.js",

-1

src/CopyIcon.svg

-64

src/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;
		}

-72

src/index.tsx

		import React from 'react';
		import copyIcon from './CopyIcon.svg';
		import './index.css';

		type TableCell = string \| number;

		type TableRow = TableCell[];

		interface Props {
		data: TableData;
		view?: boolean;
		}

		type TableData = TableRow[];

		const MarkdownTable: React.FC<Props> = ({ 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 = (): string => {
		const rows = data.map(row => `\| ${row.join(' \| ')} \|`).join('\n');
		const headerRow = `\| ${data[0].map(() => '--').join(' \| ')} \|`;
		return `${headerRow}\n${rows}`;
		};

		return (
		<div>
		{view && (
		<div className="markdown-table-container">
		<button id="copy-button" className="copy-button-view" onClick={copyToClipboard}>
		<img className="copy-icon" src={copyIcon} alt="Copy" />
		</button>
		<table className="markdown-table">
		<thead>
		<tr>
		{data[0].map((header, index) => (
		<th key={index}>{header}</th>
		))}
		</tr>
		</thead>
		<tbody>
		{data.slice(1).map((row, rowIndex) => (
		<tr key={rowIndex}>
		{row.map((cell, cellIndex) => (
		<td key={cellIndex}>{cell}</td>
		))}
		</tr>
		))}
		</tbody>
		</table>
		</div>
		)}
		{!view && (
		<button id="copy-button" className="copy-button" onClick={copyToClipboard}>
		<img className="copy-icon" src={copyIcon} alt="Copy" />
		</button>
		)}
		</div>
		);
		};

		export default MarkdownTable;

-4

src/react-app-env.d.ts

-21

tsconfig.json

		{
		"compilerOptions": {
		"jsx": "react",
		"esModuleInterop": true,
		"allowSyntheticDefaultImports": true,
		"module": "commonjs",
		"target": "es6",
		"lib": ["dom", "es6"],
		"strict": true,
		"moduleResolution": "node",
		"baseUrl": "./src",
		"paths": {
		"": ["types/"],
		},
		"declaration": true,
		"declarationDir": "./dist",
		"outDir": "./dist"
		},
		"include": ["src"],
		"exclude": ["node_modules", "dist"]
		}

Worsened metrics