Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

dangerouslySetInnerHTML? #29

Closed
jwalton opened this issue Jan 28, 2016 · 6 comments
Closed

dangerouslySetInnerHTML? #29

jwalton opened this issue Jan 28, 2016 · 6 comments
Assignees
Milestone

Comments

@jwalton
Copy link

jwalton commented Jan 28, 2016

In React, you can set inner HTML with something like:

<div dangerouslySetInnerHTML={{__html: 'my markup'}} />

but preact doesn't seem to support this? Any tips on how to achieve something similar?

@developit
Copy link
Member

This is intentionally not in preact, though it could be added to preact-compat.
You can set innerHTML in a life cycle method like componentDidUpdate or componentDidMount.

Example:

class Foo extends Component {
  componentDidMount() {
    this.base.innerHTML = 'hello';
  }
}

@jwalton
Copy link
Author

jwalton commented Jan 29, 2016

That works client side, but obviously would not work for server side rendering (since componentDidMount() will never run on the server.)

(Apologies if this comment shows up twice - I replied by email but github seems to have lost the email version. :P)

@developit
Copy link
Member

True, very good point. Perhaps that's the selling point of __dangerouslySetInnerHTML then!

developit added a commit that referenced this issue Feb 1, 2016
@developit
Copy link
Member

@jwalton - just published a prerelease of 3.0 which supports dangerouslySetInnerHTML. On npm as preact-3.0.0-beta1

@jwalton
Copy link
Author

jwalton commented Feb 1, 2016

You, sir, are a scholar and a gentleman. :)

@developit developit added this to the 3.0 milestone Feb 3, 2016
@developit developit self-assigned this Feb 3, 2016
@developit
Copy link
Member

Now generally available as of 3.2.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants