Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Latest commit

History

521 Commits

Folders and files

NameName
Last commit message
Last commit date

Repository files navigation

react-native-enriched-html by Software Mansion

AdAdAd

react-native-enriched-html

react-native-enriched-html is a powerful React Native Rich Text solution:

  • ⚡ Fully native input and display components (Supports New Architecture only)
  • 💻 HTML-based parsing with live, synchronous text styling
  • 🎨 Fully customizable styles for seamless UI integration
  • 🌐 Solid mobile and Web support

EnrichedTextInput, the rich text input component is an uncontrolled input. This means that it doesn't use any state or props to store its value, but instead directly interacts with the underlying platform-specific components. Thanks to this, the component is really performant and simple to use while offering complex and advanced features no other solution has.

EnrichedText is the display component designed to work seamlessly with EnrichedTextInput. It flawlessly renders any HTML generated by the input, while a shared, customizable styling API guarantees perfect 1:1 visual consistency between editing and displaying.

react-native-enriched-html-demo

Installation

Check out the detailed installation instructions.

Compatibility

At the moment, the library offers stable support for iOS, Android and Web.

The full list of compatible React Native versions is available here.

Documentation

To find more about react-native-enriched-html including usage guides, API references, known limitations or our contributing guide, visit the official documentation.

Examples

The source code for the example mobile and web apps is under the apps directory. You can also see the live preview of the library's capabilities by visiting the official documentation filled with interactive examples.

License

react-native-enriched-html library is licensed under The MIT License.

Community Discord

Join the Software Mansion Community Discord to chat about react-native-enriched-html or other Software Mansion libraries.

Created by Software Mansion

Since 2012 Software Mansion is a software agency with experience in building web and mobile apps. We are Core React Native Contributors and experts in dealing with all kinds of React Native issues. We can help you build your next dream product – Hire us.


Built by Software Mansion and sponsored by Filament.

Software Mansion LogoFilament Logo

Releases

Contributors

Languages