Repolode
Предложить
remarkablemark

remarkablemark/html-react-parser

Парсер HTML в React, преобразующий HTML-строки в React-элементы в Node.js и браузере.

Открыть на GitHubСайт
Звёзды
2,431
Форки
144
Открытые issues
12
Последний коммит
24 часа назад

Что это?

html-react-parser преобразует HTML-строку в один или несколько React-элементов, позволяя отображать разметку из CMS, базы данных или API внутри React-компонента без использования dangerouslySetInnerHTML. Библиотека работает и на сервере (Node.js), и на клиенте (в браузере), а также может подключаться с CDN в виде UMD-бандла.

Функция parse принимает необязательный объект параметров. Параметр replace позволяет заменять выбранные DOM-узлы собственными React-элементами; для работы с дочерними элементами и атрибутами предусмотрены вспомогательные функции domToReact и attributesToProps. Параметр transform позволяет изменять каждый разобранный элемент, а параметр library — использовать вместо React Preact или собственную UI-библиотеку. Среди других параметров — trim для обработки пробелов, настройки htmlparser2 для разбора на сервере и trustedTypePolicy для Trusted Types в браузере.

Библиотека не санитизирует HTML и сама по себе не защищает от XSS. Если данные поступают из ненадёжных источников, HTML нужно санитизировать либо использовать Content Security Policy и Trusted Types.

Ключевые возможности

  • 01Преобразует HTML-строки в React-элементы, которые можно напрямую отображать в компонентах.
  • 02Работает в Node.js для серверного рендеринга и в браузере.
  • 03Параметр replace заменяет подходящие DOM-узлы собственными React-элементами.
  • 04Параметр transform изменяет каждый разобранный элемент после преобразования.
  • 05Поддерживает Preact или собственную UI-библиотеку через параметр library.
  • 06Предусматривает параметр trim и настройки htmlparser2 для управления пробелами и поведением парсера.

Сценарии использования

  • Отображение HTML-контента из CMS или конвейера Markdown в React-приложении.
  • Замена встроенных тегов, например ссылок или изображений, React-компонентами при рендеринге.
  • Серверный рендеринг HTML-фрагментов в React-приложении на Node.js.

Быстрый старт

  1. 1

    Установить через npm

    npm install html-react-parser --save
  2. 2

    Импортировать и разобрать HTML-строку

Что важно знать

  • Не защищает от XSS; в README указано, что HTML не очищается.
  • Не очищает некорректный HTML.
  • Параметры htmlparser2 работают только на сервере (Node.js), но не в браузере.

Темы

#react#html#parser#javascript#typescript#jsx#dom#html-react-parser#library#npm

Частые вопросы

Что такое html-react-parser?
Парсер HTML в React, преобразующий HTML-строки в React-элементы в Node.js и браузере. html-react-parser преобразует HTML-строку в один или несколько React-элементов, позволяя отображать разметку из CMS, базы данных или API внутри React-компонента без использования dangerouslySetInnerHTML. Библиотека работает и на сервере (Node.js), и на клиенте (в браузере), а также может подключаться с CDN в виде UMD-бандла.
html-react-parser можно использовать бесплатно? Какая у него лицензия?
html-react-parser распространяется с открытым исходным кодом под лицензией MIT. Перед использованием в коммерческих продуктах проверьте условия лицензии.
html-react-parser всё ещё поддерживается?
Активно поддерживается. Последний коммит в html-react-parser — 6 нояб. 2026 г..
Для чего можно использовать html-react-parser?
Отображение HTML-контента из CMS или конвейера Markdown в React-приложении. Замена встроенных тегов, например ссылок или изображений, React-компонентами при рендеринге. Серверный рендеринг HTML-фрагментов в React-приложении на Node.js.
Как установить html-react-parser?
Установить через npm: npm install html-react-parser --save Импортировать и разобрать HTML-строку
Где скачать html-react-parser?
Исходный код и инструкции по установке — на GitHub: https://github.com/remarkablemark/html-react-parser

Описание создано ИИ на основе README проекта. Статистика GitHub обновляется ежедневно.

Похожие проекты

preactjs / preact

Быстрая UI-библиотека размером около 4 КБ, совместимая с React и предлагающая тот же современный API компонентов на основе Virtual DOM.

Фронтенд и UI#react#ui#virtual-dom
39 тыс.+18 за неделю3,2 тыс.JavaScriptMITАктивно поддерживаетсяОбновлён 13 часов назад

react / react

JavaScript-библиотека для создания интерактивных пользовательских интерфейсов из компонентов, работающих в вебе, на сервере и нативных платформах.

Фронтенд и UI#javascript#ui#frontend
252,2 тыс.+387 за неделю51,8 тыс.JavaScriptMITОбновлён 13 часов назад

solidjs / solid

Декларативная JavaScript-библиотека для UI: компилирует JSX в обновления реального DOM и использует тонкозернистую реактивность вместо Virtual DOM.

Фронтенд и UI#ui#reactive#jsx
36,3 тыс.+90 за неделю1,2 тыс.TypeScriptMITАктивно поддерживаетсяОбновлён 10 часов назад