Rendering raw html with reactjs

Question

So is this the only way to render raw html with reactjs      http   facebook github io react docs tutorial html    tutorial7 js var converter   new Showdown converter    var Comment   React createClass     render  function         var rawMarkup   converter makeHtml this props children toString         return          lt div className  comment  gt           lt h2 className  commentAuthor  gt             this props author           lt  h2 gt           lt span dangerouslySetInnerHTML     html  rawMarkup     gt         lt  div gt                   I know there are some cool ways to markup stuff with JSX  but I am mainly interested in being able to render raw html  with all the classes  inline styles  etc     Something complicated like this    lt  -- http   getbootstrap com components  dropdowns-example -- gt   lt div class  dropdown  gt     lt button class  btn btn-default dropdown-toggle  type  button  id  dropdownMenu1  data-toggle  dropdown  aria-expanded  true  gt      Dropdown      lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  role  menu  aria-labelledby  dropdownMenu1  gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Action lt  a gt  lt  li gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Another action lt  a gt  lt  li gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Something else here lt  a gt  lt  li gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Separated link lt  a gt  lt  li gt     lt  ul gt   lt  div gt    I would not want to have to rewrite all of that in JSX   Maybe I am thinking about this all wrong  Please correct me

User · Answer

export class ModalBody extends Component      rawMarkup            var rawMarkup   this props content         return     html  rawMarkup              render            return                   lt div className  modal-body  gt                        lt span dangerouslySetInnerHTML  this rawMarkup      gt                    lt  div gt

User · Answer

dangerouslySetInnerHTML is React   s replacement for using innerHTML in the browser DOM  In general  setting HTML from code is risky because it   s easy to inadvertently expose your users to a cross-site scripting  XSS  attack   It is better safer to sanitise your raw HTML  using e g   DOMPurify  before injecting it into the DOM via dangerouslySetInnerHTML   DOMPurify - a DOM-only  super-fast  uber-tolerant XSS sanitizer for HTML  MathML and SVG  DOMPurify works with a secure default  but offers a lot of configurability and hooks   Example   import React from  react  import createDOMPurify from  dompurify  import   JSDOM   from  jsdom   const window    new JSDOM      window const DOMPurify   createDOMPurify window   const rawHTML      lt div class  dropdown  gt     lt button class  btn btn-default dropdown-toggle  type  button  id  dropdownMenu1  data-toggle  dropdown  aria-expanded  true  gt      Dropdown      lt span class  caret  gt  lt  span gt     lt  button gt     lt ul class  dropdown-menu  role  menu  aria-labelledby  dropdownMenu1  gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Action lt  a gt  lt  li gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Another action lt  a gt  lt  li gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Something else here lt  a gt  lt  li gt       lt li role  presentation  gt  lt a role  menuitem  tabindex  -1  href     gt Separated link lt  a gt  lt  li gt     lt  ul gt   lt  div gt     const YourComponent        gt       lt div gt         lt div dangerouslySetInnerHTML      html  DOMPurify sanitize rawHTML       gt       lt  div gt     export default YourComponent

User · Answer

dangerouslySetInnerHTML should not be used unless absolutely necessary  According to the docs   This is mainly for cooperating with DOM string manipulation libraries   When you use it  you re giving up the benefit of React s DOM management   In your case  it is pretty straightforward to convert to valid JSX syntax  just change class attributes to className  Or  as mentioned in the comments above  you can use the ReactBootstrap library which encapsulates Bootstrap elements into React components

User · Answer

You could leverage the html-to-react npm module   Note  I m the author of the module and just published it a few hours ago  Please feel free to report any bugs or usability issues

User · Answer

I used this library called Parser  It worked for what I needed   import React    Component   from  react       import Parser from  html-react-parser    class MyComponent extends Component     render          lt div gt  Parser this state message   lt  div gt

User · Answer

I have used this in quick and dirty situations      react render method   render         return          lt div gt            this props textOrHtml indexOf   lt         -1                                  lt div dangerouslySetInnerHTML     html  this props textOrHtml replace    lt    script  gi   illegalscript      gt                   lt  div gt                                this props textOrHtml                     lt  div gt

User · Answer

I have tried this pure component   const RawHTML     children  className          gt    lt div className  className    dangerouslySetInnerHTML      html  children replace   n g    lt br   gt        gt    Features    Takes classNameprop  easier to style it  Replaces  n to  lt br   gt   you often want to do that  Place content as children when using the component like    lt RawHTML gt  myHTML  lt  RawHTML gt    I have placed the component in a Gist at Github  RawHTML  ReactJS pure component to render HTML

User · Answer

I needed to use a link with onLoad attribute in my head where div is not allowed so this caused me significant pain   My current workaround is to close the original script tag  do what I need to do  then open script tag  to be closed by the original    Hope this might help someone who has absolutely no other choice     lt script dangerouslySetInnerHTML      html    lt  script gt      lt link rel  preload  href  https   fonts googleapis com css family Open Sans  as  style  onLoad  this onload null this rel  stylesheet   crossOrigin  anonymous   gt   lt script gt       gt

User · Answer

There are now safer methods to render HTML  I covered this in a previous answer here  You have 4 options  the last uses dangerouslySetInnerHTML    Methods for rendering HTML   Easiest - Use Unicode  save the file as UTF-8 and set the charset to UTF-8     lt div gt   First    Second   lt  div gt  Safer - Use the Unicode number for the entity inside a Javascript string    lt div gt   First  u00b7 Second   lt  div gt   or   lt div gt   First     String fromCharCode 183      Second   lt  div gt  Or a mixed array with strings and JSX elements    lt div gt    First     lt span gt  amp middot  lt  span gt     Second    lt  div gt  Last Resort - Insert raw HTML using dangerouslySetInnerHTML    lt div dangerouslySetInnerHTML     html   First  amp middot  Second      gt

User · Answer

Here s a little less opinionated version of the RawHTML function posted before  It lets you    configure the tag optionally replace newlines to  lt br   gt  s pass extra props that RawHTML will pass to the created element supply an empty string  RawHTML gt  lt  RawHTML gt     Here s the component   const RawHTML      children  tag    div   nl2br   true     rest      gt      React createElement tag            dangerouslySetInnerHTML                  html  nl2br                   children  amp  amp  children replace   n g    lt br   gt                      children                        rest          RawHTML propTypes         children  PropTypes string      nl2br  PropTypes bool      tag  PropTypes string       Usage    lt RawHTML gt   First  amp middot  Second   lt  RawHTML gt   lt RawHTML tag  h2  gt   First  amp middot  Second   lt  RawHTML gt   lt RawHTML tag  h2  className  test  gt   First  amp middot  Second   lt  RawHTML gt   lt RawHTML gt   first line nsecond line   lt  RawHTML gt   lt RawHTML nl2br  false  gt   first line nsecond line   lt  RawHTML gt   lt RawHTML gt  lt  RawHTML gt    Output    lt div gt First    Second lt  div gt   lt h2 gt First    Second lt  h2 gt   lt h2 class  test  gt First    Second lt  h2 gt   lt div gt first line lt br gt second line lt  div gt   lt div gt first line second line lt  div gt   lt div gt  lt  div gt    It will break on    lt RawHTML gt  lt h1 gt First  amp middot  Second lt  h1 gt  lt  RawHTML gt

[javascript] Rendering raw html with reactjs

Examples related to javascript

Examples related to reactjs