react-square-text
Version:
A JavaScript utility to display text in a square shape using HTML and CSS. Supports monospaced fonts for better alignment.
1 lines • 4.61 kB
Source Map (JSON)
{"version":3,"sources":["../index.tsx"],"sourcesContent":["import React from 'react';\nimport { SquareTextProps, ReactSquareTextOptions, MonospacedFont } from './interfaces';\n\nconst SquareTextWriter: React.FC<SquareTextProps> = ({\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 // Determine the font\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 halfFontSize = fontSize / 2; // To center each letter better\n\n const letters = text.split('');\n const fontSizex2 = fontSize * 1;\n const newsize = size - fontSizex2;\n const perimeter = newsize * 4; // Perimeter of the square\n const spacing = perimeter / letters.length; // Uniform spacing\n\n return (\n <div\n id={id}\n aria-label={text}\n style={{\n height: `${size}px`,\n width: `${size}px`,\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '40px'\n }}\n >\n {letters.map((letter, index) => {\n const distance = index * spacing; // Distance along the perimeter\n const newDistanceToRest = (distance / 100) * 0.25;\n const newDistance = distance - newDistanceToRest;\n let x = 0,\n y = 0,\n rotation = 0;\n\n if (distance < newsize) {\n // Top side (left → right)\n x = distance;\n y = halfFontSize;\n rotation = 0;\n } else if (distance < newsize * 2) {\n // Right side (top → bottom)\n x = newsize;\n y = newDistance - newsize + fontSize;\n rotation = 90;\n } else if (distance < newsize * 3) {\n // Bottom side (right → left)\n x = newsize - (newDistance - newsize * 2);\n y = newsize + halfFontSize;\n rotation = 180;\n } else {\n // Left side (bottom → top)\n x = 0;\n y = newsize - (newDistance - newsize * 3);\n rotation = 270;\n }\n\n return (\n <p\n key={index}\n style={{\n position: 'absolute',\n left: `${x}px`,\n top: `${y}px`,\n transform: `rotate(${rotation}deg)`,\n color: options.color || '#000000',\n fontFamily: fontFamily,\n fontWeight: options.fontWeight || 400,\n fontSize: fontSize,\n margin: 0,\n lineHeight: 0,\n padding: 0,\n whiteSpace: 'nowrap'\n }}\n >\n {letter}\n </p>\n );\n })}\n </div>\n );\n};\n\nexport default SquareTextWriter;\n"],"mappings":";;;;AAAA,OAAO,WAAW;AAGlB,IAAM,mBAA8C,wBAAC;AAAA,EACnD;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU,CAAC;AACb,MAAM;AACJ,QAAM,kBAAkB;AAAA,IACtB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAGA,MAAI,aAAa;AACjB,MAAI,QAAQ,eAAe,gBAAgB,QAAQ,YAAY;AAC7D,iBAAa,QAAQ;AAAA,EACvB,WAAW,gBAAgB,SAAS,QAAQ,cAAc,EAAE,GAAG;AAC7D,iBAAa,QAAQ,cAAc;AAAA,EACrC;AAEA,QAAM,WAAW,QAAQ,YAAY;AACrC,QAAM,eAAe,WAAW;AAEhC,QAAM,UAAU,KAAK,MAAM,EAAE;AAC7B,QAAM,aAAa,WAAW;AAC9B,QAAM,UAAU,OAAO;AACvB,QAAM,YAAY,UAAU;AAC5B,QAAM,UAAU,YAAY,QAAQ;AAEpC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,cAAY;AAAA,MACZ,OAAO;AAAA,QACL,QAAQ,GAAG,IAAI;AAAA,QACf,OAAO,GAAG,IAAI;AAAA,QACd,UAAU;AAAA,QACV,SAAS;AAAA,QACT,gBAAgB;AAAA,QAChB,YAAY;AAAA,QACZ,QAAQ;AAAA,MACV;AAAA;AAAA,IAEC,QAAQ,IAAI,CAAC,QAAQ,UAAU;AAC9B,YAAM,WAAW,QAAQ;AACzB,YAAM,oBAAqB,WAAW,MAAO;AAC7C,YAAM,cAAc,WAAW;AAC/B,UAAI,IAAI,GACN,IAAI,GACJ,WAAW;AAEb,UAAI,WAAW,SAAS;AAEtB,YAAI;AACJ,YAAI;AACJ,mBAAW;AAAA,MACb,WAAW,WAAW,UAAU,GAAG;AAEjC,YAAI;AACJ,YAAI,cAAc,UAAU;AAC5B,mBAAW;AAAA,MACb,WAAW,WAAW,UAAU,GAAG;AAEjC,YAAI,WAAW,cAAc,UAAU;AACvC,YAAI,UAAU;AACd,mBAAW;AAAA,MACb,OAAO;AAEL,YAAI;AACJ,YAAI,WAAW,cAAc,UAAU;AACvC,mBAAW;AAAA,MACb;AAEA,aACE;AAAA,QAAC;AAAA;AAAA,UACC,KAAK;AAAA,UACL,OAAO;AAAA,YACL,UAAU;AAAA,YACV,MAAM,GAAG,CAAC;AAAA,YACV,KAAK,GAAG,CAAC;AAAA,YACT,WAAW,UAAU,QAAQ;AAAA,YAC7B,OAAO,QAAQ,SAAS;AAAA,YACxB;AAAA,YACA,YAAY,QAAQ,cAAc;AAAA,YAClC;AAAA,YACA,QAAQ;AAAA,YACR,YAAY;AAAA,YACZ,SAAS;AAAA,YACT,YAAY;AAAA,UACd;AAAA;AAAA,QAEC;AAAA,MACH;AAAA,IAEJ,CAAC;AAAA,EACH;AAEJ,GApGoD;AAsGpD,IAAO,gBAAQ;","names":[]}