react/no-danger | Bun Docs

React escapes the text you render. dangerouslySetInnerHTML turns that off and puts a string into the page as HTML. If any part of the string comes from a user, they can run scripts in other users' browsers.

By default the rule only checks DOM elements such as <div>, not your own components.

Configure#

Off by default. To turn it on:

bunfig.toml

[lint.rules]
"react/no-danger" = "error" # or "warn"

Every option, set to its default:

bunfig.toml

[lint.rules]
"react/no-danger" = ["error", {
  customComponentNames = [], # list of strings
}]

Examples#

example.jsx1 problem

const comment = <div dangerouslySetInnerHTML={{ __html: post.body }} />;

example.jsxNo problems

const comment = <div>{post.body}</div>;

const preview = <Markdown dangerouslySetInnerHTML={{ __html: post.body }} />;

Options#

Option	Default	What it does
`customComponentNames`	`[]`	Names of components to check as well. A name can be a glob: `""` matches every component, and `"Html"` matches every name that starts with `Html`.

example.jsxwith { "customComponentNames": ["Markdown", "Html*"] }2 problems

const preview = <Markdown dangerouslySetInnerHTML={{ __html: post.body }} />;

const footer = <HtmlBlock dangerouslySetInnerHTML={{ __html: site.footer }} />;

When not to use it#

Some pages need to render HTML from a trusted or sanitized source, such as a Markdown renderer's output. Disable the rule on those lines, so each use stays visible in review.