language-styler
Advanced tools
A high performance JavaScript library for detecting and styling multilingual text with React and TypeScript support.
A high-performance JavaScript library for detecting and styling multilingual text with minimal DOM overhead. Supports 50+ languages with React and TypeScript support.
npm install language-styler
import { LangStyler } from 'language-styler';
import 'language-styler/styles';
function App() {
return (
<LangStyler>
<p>আজকের দিনটি খুবই special! English text العربية 中文 한국어</p>
</LangStyler>
);
}
import { processText } from 'language-styler/vanilla';
const result = processText("Hello বাংলা العربية 中文");
console.log(result.html);
// Output: <span class="lang-english">Hello</span> <span class="lang-bengali">বাংলা</span> <span class="lang-arabic" dir="rtl">العربية</span> <span class="lang-chinese">中文</span>
import { processElement } from 'language-styler/vanilla';
// Process specific element
const element = document.getElementById('content');
processElement(element);
// Process entire document
import { processDocument } from 'language-styler/vanilla';
processDocument();
lang-bengalilang-hindilang-tamillang-telugulang-malayalamlang-gujaratilang-punjabilang-kannadalang-sinhalalang-marathilang-nepalilang-odialang-assameselang-arabic ← RTLlang-persian ← RTLlang-urdu ← RTLlang-hebrew ← RTLlang-kurdish ← RTLlang-pashto ← RTLlang-chineselang-chinese-traditionallang-japaneselang-koreanlang-thailang-vietnameselang-khmerlang-laolang-myanmarlang-tagaloglang-indonesianlang-malaylang-englishlang-spanishlang-frenchlang-germanlang-italianlang-portugueselang-russianlang-ukrainianlang-polishlang-czechlang-hungarianlang-romanianlang-dutchlang-swedishlang-norwegianlang-danishlang-finnishlang-greeklang-turkishlang-amhariclang-swahililang-hausalang-yorubalang-igbolang-georgianlang-armenianlang-emojilang-numberslang-codelang-mathlang-punctuationlang-mongolianlang-tibetanimport { LangStyler } from 'language-styler';
function AdvancedExample() {
return (
<LangStyler
languages={['Bengali', 'English', 'Arabic', 'Chinese']}
enableRTL={true}
enableFonts={true}
customClasses={{
Bengali: 'my-bengali-style',
English: 'my-english-style'
}}
customFonts={{
Bengali: 'SolaimanLipi, serif',
Arabic: 'Amiri, serif'
}}
as="article"
className="multilingual-content"
>
<h1>আমাদের website এ welcome! مرحبا بكم 欢迎光临</h1>
<p>
This is a multilingual article যেখানে আমরা multiple languages
ব্যবহার করেছি। هذا مثال على النص متعدد اللغات. 这是多语言文本的示例。
</p>
</LangStyler>
);
}
import { createProcessor } from 'language-styler/vanilla';
// Create custom processor
const processor = createProcessor({
languages: ['Bengali', 'English', 'Arabic'],
enableRTL: true,
customClasses: {
Bengali: 'custom-bengali',
Arabic: 'custom-arabic'
}
});
// Add custom language
processor.addLanguage(
'Sylheti',
/[\u0980-\u09FF]/,
'lang-sylheti',
false,
'SylhetiBangla, Kalpurush'
);
// Process text
const result = processor.processText('আমি sylheti ভাষায় কথা কই');
console.log(result.html);
console.log('Available languages:', processor.getAvailableLanguages());
import { LANGUAGE_GROUPS, COMMON_COMBINATIONS } from 'language-styler';
// Use predefined language groups
<LangStyler languages={LANGUAGE_GROUPS.SouthAsian}>
<p>বাংলা हिन्दी தமிழ் తెలుగు മലയാളം</p>
</LangStyler>
// Use common combinations
<LangStyler languages={COMMON_COMBINATIONS.Multilingual}>
<p>English বাংলা العربية 中文 Español</p>
</LangStyler>
// Available groups:
// - LANGUAGE_GROUPS.SouthAsian
// - LANGUAGE_GROUPS.MiddleEastern
// - LANGUAGE_GROUPS.EastAsian
// - LANGUAGE_GROUPS.SoutheastAsian
// - LANGUAGE_GROUPS.European
// - LANGUAGE_GROUPS.African
// - LANGUAGE_GROUPS.Technical
// Main bundle (React + Vanilla)
import { LangStyler, processText } from 'language-styler';
// React only
import { LangStyler } from 'language-styler/react';
// Vanilla JS only
import { processText } from 'language-styler/vanilla';
// Styles
import 'language-styler/styles';
interface StylerProps {
children: ReactNode;
languages?: string[]; // Languages to detect
enableRTL?: boolean; // Enable RTL support (default: true)
enableFonts?: boolean; // Enable custom fonts (default: true)
customClasses?: Record<string, string>; // Custom CSS classes
customFonts?: Record<string, string>; // Custom font families
mergeWhitespace?: boolean; // Merge whitespace (default: true)
preserveSpaces?: boolean; // Preserve spaces (default: true)
as?: React.ElementType; // Container element (default: 'div')
className?: string; // Container CSS class
style?: React.CSSProperties; // Container styles
}
// Process text and return segments + HTML
function processText(text: string, options?: ProcessorOptions): ProcessResult;
// Process DOM element in place
function processElement(element: HTMLElement, options?: ProcessorOptions): void;
// Process entire document
function processDocument(options?: ProcessorOptions): void;
// Process elements matching selector
function processSelector(selector: string, options?: ProcessorOptions): void;
// Create processor instance for advanced usage
function createProcessor(options?: ProcessorOptions): TextProcessor;
class TextProcessor {
// Process text
processText(text: string): ProcessResult;
// Add custom language
addLanguage(name: string, regex: RegExp, className: string, isRTL?: boolean, fontFamily?: string): void;
// Remove language
removeLanguage(name: string): boolean;
// Get available languages
getAvailableLanguages(): string[];
// Get language configuration
getLanguageConfig(name: string): LanguageConfig | null;
}
interface ProcessResult {
segments: TextSegment[];
html: string;
stats: {
totalCharacters: number;
totalSegments: number;
languagesDetected: string[];
processingTime: number;
};
}
interface TextSegment {
text: string;
language: string;
className: string;
isRTL: boolean;
fontFamily: string;
}
Each language gets a CSS class following the pattern lang-{language}:
.lang-bengali { font-family: 'Kalpurush', 'SolaimanLipi', sans-serif; }
```css
.lang-english { font-family: 'Inter', 'Segoe UI', 'Arial', sans-serif; }
.lang-arabic {
font-family: 'Amiri', 'Scheherazade New', sans-serif;
direction: rtl;
text-align: right;
}
.lang-chinese { font-family: 'Noto Sans SC', 'SimSun', sans-serif; }
.lang-emoji { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif; }
.lang-code {
font-family: 'Fira Code', 'Consolas', monospace;
background: #f5f5f5;
padding: 2px 4px;
border-radius: 3px;
}
/* Override default styles */
.lang-bengali {
font-family: 'SolaimanLipi', serif;
color: #2c5aa0;
font-weight: 500;
}
.lang-arabic {
font-family: 'Amiri', serif;
font-size: 1.1em;
line-height: 1.8;
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
.lang-code {
background: #2d3748;
color: #e53e3e;
}
}
/* Responsive design */
@media (max-width: 768px) {
.lang-arabic, .lang-persian, .lang-urdu {
font-size: 1.1em;
}
}
function BlogPost() {
return (
<LangStyler languages={['Bengali', 'English', 'Arabic', 'Chinese']}>
<article>
<h1>আজকের Technology World এ AI এর Impact</h1>
<p>
আর্টিফিশিয়াল ইন্টেলিজেন্স বা AI আজকের যুগের সবচেয়ে important technology।
এটি আমাদের daily life এ significant changes এনেছে।
</p>
<blockquote>
"الذكاء الاصطناعي سيغير العالم" -
"人工智能将改变世界" -
"AI will change the world"
</blockquote>
<p>
Machine Learning, Deep Learning এবং Neural Networks এর মাধ্যমে
AI systems আরো sophisticated হচ্ছে। Future এ এর applications
আরো বিস্তৃত হবে।
</p>
</article>
</LangStyler>
);
}
function ProductDescription() {
return (
<LangStyler>
<div className="product-details">
<h2>স্মার্টফোন - Premium Quality</h2>
<div className="features">
<p>✅ High-resolution camera সহ professional photography</p>
<p>✅ Long-lasting battery যা সারাদিন চলে</p>
<p>✅ Fast processor for smooth performance</p>
<p>✅ Water-resistant design</p>
</div>
<div className="price">
<span className="original">Price: ৳৫০,০০০</span>
<span className="discounted">Special Offer: ৳৪৫,০০০</span>
</div>
<p className="warranty">
১ বছরের warranty সহ free home delivery available।
Order করতে call করুন: ০১৭১২-৩৪৫৬৭২
</p>
</div>
</LangStyler>
);
}
function SocialPost() {
return (
<LangStyler languages={['Bengali', 'English', 'Emoji']}>
<div className="social-post">
<p>
আজ অসাধারণ একটা sunset দেখলাম! 🌅
The colors were absolutely breathtaking 😍
Nature এর beauty সত্যিই amazing!
#sunset #nature #photography #beautiful 📸✨
</p>
<div className="engagement">
<span>❤️ 127 likes</span>
<span>💬 23 comments</span>
<span>🔄 45 shares</span>
</div>
</div>
</LangStyler>
);
}
function CodeExample() {
return (
<LangStyler languages={['Bengali', 'English', 'Code', 'Numbers']}>
<div className="documentation">
<h3>JavaScript Function এর Example</h3>
<p>
এই function টি 2টি number এর sum calculate করে:
</p>
<pre>
{`
function addNumbers(a, b) {
return a + b;
}
// Usage example
const result = addNumbers(10, 20);
console.log("Result:", result); // Output: 30`}
</pre>
<p>
এখানে addNumbers function টি 2টি parameter নেয় এবং তাদের sum return করে।
Time complexity হলো O(1) কারণ এটি constant time এ execute হয়।
</p>
</div>
</LangStyler>
);
}
function NewsArticle() {
return (
<LangStyler languages={['Bengali', 'English', 'Numbers']}>
<article className="news-article">
<h1>বাংলাদেশে Technology Sector এর Growth</h1>
<p className="lead">
গত 5 বছরে বাংলাদেশের technology sector এ remarkable growth
দেখা গেছে। IT exports এখন $1.3 billion ছাড়িয়ে গেছে।
</p>
<p>
Software development, mobile app development, এবং web development
এর ক্ষেত্রে বাংলাদেশি developers দের demand বিশ্বব্যাপী বৃদ্ধি পেয়েছে।
Freelancing platform গুলোতে বাংলাদেশ এখন top 5 এ রয়েছে।
</p>
<div className="statistics">
<h3>Key Statistics:</h3>
<ul>
<li>IT companies: 4,500+</li>
<li>IT professionals: 500,000+</li>
<li>Annual growth rate: 25%</li>
<li>Export earnings: $1.3B</li>
</ul>
</div>
<p>
Government এর Digital Bangladesh initiative এবং private sector
এর investment এর ফলে এই sector টি আরো দ্রুত grow করছে।
Future এ এই trend continue থাকবে বলে experts রা মনে করেন।
</p>
</article>
</LangStyler>
);
}
Q: Languages not detecting properly?
// Check if language is enabled
const processor = createProcessor({
languages: ['Bengali', 'English', 'YourLanguage']
});
console.log('Available:', processor.getAvailableLanguages());
Q: Fonts not loading?
/* Ensure fonts are loaded */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Bengali');
.lang-bengali {
font-family: 'Noto Sans Bengali', sans-serif;
}
Q: RTL text not displaying correctly?
// Ensure RTL is enabled
<LangStyler enableRTL={true}>
<p>Arabic text here</p>
</LangStyler>
Q: Performance issues with large text?
// Use specific languages only
const result = processText(text, {
languages: ['Bengali', 'English'], // Limit languages
mergeWhitespace: true, // Enable merging
preserveSpaces: false // Skip space preservation
});
| Feature | Language Styler | Other Solutions |
|---|---|---|
| DOM Efficiency | 90%+ reduction | Character-by-character |
| Language Support | 50+ languages | Limited |
| RTL Support | ✅ Built-in | ❌ Manual |
| React Integration | ✅ Native | ❌ Wrapper needed |
| TypeScript | ✅ Full support | ❌ Limited |
| Bundle Size | 8-15KB | 50KB+ |
| Performance | 500k chars/sec | 50k chars/sec |
| Custom Languages | ✅ Runtime | ❌ Build-time only |
MIT License - see LICENSE file for details.
Made with ❤️ by Eyachir Arafat
বাংলায় তৈরি | صنع بالعربية | 用中文制作 | 한국어로 제작 | Made with English
FAQs
A high performance JavaScript library for detecting and styling multilingual text with React and TypeScript support.
The npm package language-styler receives a total of 0 weekly downloads. As such, language-styler popularity was classified as not popular.
We found that language-styler demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A RubyGems malware campaign used 60 malicious packages posing as automation tools to steal credentials from social media and marketing tool users.
Security News
The CNA Scorecard ranks CVE issuers by data completeness, revealing major gaps in patch info and software identifiers across thousands of vulnerabilities.
Research
/Security News
Two npm packages masquerading as WhatsApp developer libraries include a kill switch that deletes all files if the phone number isn’t whitelisted.