Registry / productivity / qpien-chat-text-formatter

qpien-chat-text-formatter

JSON →
library1.4.3jsnpmunverified

qpien-chat-text-formatter v1.4.3 is a React component for formatting chat messages with bold, italic, strikethrough, monospace, auto-linked URLs, and bulleted/numbered lists. Created by demirelakif, it supports Turkish locale via a capitalizeFirst utility that handles special characters (İ, ı, etc.). Requires React >=16.8.0. Actively maintained with a one-month release cycle. Differentiators: lightweight (no Markdown parser dependency), dedicated chat-focused syntax, and built-in Turkish language support.

productivity
npm install qpien-chat-text-formatter
package ↗
INSTALL
IMPORT
SIG · QPIEN-CHAT-TEXT-FO
Q
qpien-chat-text-formatter
productivityjavascriptv1.4.3
harness data pending
Install & Compatibility
Where this runs

No compatibility data collected yet for this library.

Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

ChatTextFormatter
✓ import { ChatTextFormatter } from 'qpien-chat-text-formatter'
✗ const { ChatTextFormatter } = require('qpien-chat-text-formatter')
Package is ESM and ships TypeScript types; named export only. CommonJS require() may work if project uses module bundler that handles ESM interop, but ESM import is recommended.
capitalizeFirst
✓ import { capitalizeFirst } from 'qpien-chat-text-formatter'
✗ import { capitalizeFirst } from 'qpien-chat-text-formatter/capitalizeFirst'
capitalizeFirst is a named export from the main package, not a separate module. The wrong path does not exist.
default import
✓ import { ChatTextFormatter } from 'qpien-chat-text-formatter'
✗ import ChatTextFormatter from 'qpien-chat-text-formatter'
No default export; only named exports (ChatTextFormatter, capitalizeFirst). Default import will result in undefined.

Demonstrates basic usage of ChatTextFormatter with bold, italic, bullet list, and auto-linked URL.

import { ChatTextFormatter } from 'qpien-chat-text-formatter'; function App() { const markdown = `*Bold* and _italic_\n\n- List item 1\n- List item 2\n\nVisit https://example.com`; return <ChatTextFormatter text={markdown} config={{ linkTarget: '_blank' }} />; }
Debug
Known issues
gotchaImporting default instead of named export
fix
Use import { ChatTextFormatter } from 'qpien-chat-text-formatter' instead of default import.
affects: >=1.0.0
gotchaTurkish locale misinterpretation with toLocaleUpperCase
fix
Update to v1.4.0 or later and use the provided capitalizeFirst function with 'tr-TR' locale.
affects: <1.4.0
deprecatedPackage does not expose a CSS file; styling must be applied via className or style props
fix
No formal CSS API; use inline style or className to customize appearance.
affects: >=1.0.0
Errors
Common errors & fixes
Uncaught TypeError: Cannot destructure property 'text' of 'undefined' or 'null'
Passing text prop as undefined or null
fix
Ensure text prop is a string, e.g., <ChatTextFormatter text={myText ?? ''} />
Module not found: Can't resolve 'qpien-chat-text-formatter'
Package not installed or missing in node_modules
fix
Run npm install qpien-chat-text-formatter
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
Default import used instead of named import
fix
Change import to import { ChatTextFormatter } from 'qpien-chat-text-formatter'
TS2307: Cannot find module 'qpien-chat-text-formatter' or its corresponding type declarations.
TypeScript cannot resolve package types
fix
Install @types/react? Package ships types; check tsconfig includes node_modules/@types, or if using an older TS version, add 'skipLibCheck': true
Upgrade
Version history
1.4.3latest on npm
Audit
Dependencies
reactrequiredPeer dependency for React component
Agent activity
13 hits · last 30 days
node
12
OpenAI (training)
1
Resources
packageqpien-chat-text-formatter ↗
qpien-chat-text-formatter — npm install qpien-chat-text-formatter · libregistry