react-triangular-text
Version:
React utility to display text in a equilateral triangular shape. Supports monospaced fonts for better alignment.
1 lines • 6.61 kB
Source Map (JSON)
{"version":3,"sources":["../index.tsx"],"sourcesContent":["import React from 'react';\nimport {\n TriangularTextProps,\n ReactTriangularTextOptions,\n MonospacedFont\n} from './interfaces';\n\nconst TriangularText: React.FC<TriangularTextProps> = ({\n text,\n size,\n id,\n options = {}\n}) => {\n const monospacedFonts = [\n 'Menlo',\n 'Courier New',\n 'Consolas',\n 'Lucida Console',\n 'Monaco',\n 'monospace'\n ];\n\n let fontFamily = 'Menlo, monospace';\n if (options.fontFamily === 'customFont' && options.customFont) {\n fontFamily = options.customFont;\n } else if (monospacedFonts.includes(options.fontFamily || '')) {\n fontFamily = options.fontFamily || 'Menlo';\n }\n\n const fontSize = options.fontSize || 16;\n const triangleHeight = (Math.sqrt(3) / 2) * size;\n const perimeter = size * 3;\n const spacing = perimeter / text.length;\n\n const baseText = text.slice(0, Math.floor(text.length / 3));\n const rightText = text.slice(\n Math.floor(text.length / 3),\n Math.floor((2 * text.length) / 3)\n );\n const leftText = text.slice(Math.floor((2 * text.length) / 3));\n\n return (\n <div\n id={id}\n aria-label={text}\n style={{\n height: `${triangleHeight}px`,\n width: `${size}px`,\n position: 'relative'\n }}\n >\n {/* Base */}\n {rightText\n ?.split('')\n ?.reverse()\n ?.map((letter, index) => {\n const x = (size / baseText.length) * index;\n const y = triangleHeight - fontSize / 2;\n return (\n <p\n key={`base-${index}`}\n style={{\n position: 'absolute',\n left: `${x}px`,\n top: `${y}px`,\n transform: `rotate(180deg)`,\n color: options.color || '#000000',\n fontFamily: fontFamily,\n fontWeight: options.fontWeight || 400,\n fontSize: fontSize,\n margin: 0,\n lineHeight: 0,\n whiteSpace: 'nowrap'\n }}\n >\n {letter}\n </p>\n );\n })}\n\n {/* Right side, top to bottom */}\n {baseText\n ?.split('')\n ?.reverse()\n ?.map((letter, index) => {\n const adjustedDistance = (size / rightText.length) * index;\n const x = size - adjustedDistance / 2 - fontSize / 2;\n const y = triangleHeight - (Math.sqrt(3) / 2) * adjustedDistance - fontSize / 2;\n return (\n <p\n key={`right-${index}`}\n style={{\n position: 'absolute',\n left: `${x}px`,\n top: `${y}px`,\n transform: `rotate(60deg)`,\n color: options.color || '#000000',\n fontFamily: fontFamily,\n fontWeight: options.fontWeight || 400,\n fontSize: fontSize,\n margin: 0,\n lineHeight: 0,\n whiteSpace: 'nowrap'\n }}\n >\n {letter}\n </p>\n );\n })}\n\n {/* Left side, bottom to top */}\n {leftText\n ?.split('')\n\n ?.map((letter, index) => {\n const adjustedDistance = (size / leftText.length) * index;\n const x = adjustedDistance / 2 + fontSize / 2;\n const y =\n triangleHeight -\n (Math.sqrt(3) / 2) * adjustedDistance -\n spacing -\n fontSize / 3;\n return (\n <p\n key={`left-${index}`}\n style={{\n position: 'absolute',\n left: `${x}px`,\n top: `${y}px`,\n transform: `rotate(-60deg)`,\n color: options.color || '#000000',\n fontFamily: fontFamily,\n fontWeight: options.fontWeight || 400,\n fontSize: fontSize,\n margin: 0,\n lineHeight: 0,\n whiteSpace: 'nowrap'\n }}\n >\n {letter}\n </p>\n );\n })}\n </div>\n );\n};\n\nexport default TriangularText;\n"],"mappings":"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","names":[]}