deschtex / html2react Goto Github PK

Hello - Thank you for creating this solution. It is very helpful. One thing I noticed is that the URL for the background-image property does not properly convert. For example the following HTML:

<td style="background-position:center; background-position:top; background-image: url('https://s3.amazonaws.com/preferably-dev/templates/images/bg_desktop.png');">
converts to:

<td style="background-position:center; background-position:top; background-image: url('https');">

Do you know if this is expected/part of react validation or some other dependency?

Thanks.

Brian

See https://www.w3.org/TR/html-markup/syntax.html#syntax-elements for list of void element tags

It would be nice to be able to set a list of default/global element overrides, so that one does not have to repeat the overrides for recurring conversions. Example:

import HTML2React from 'html2react'
import Link from './components/Link'

HTML2React.setGlobalElementOverrides({
  'a.external': (props) => (
    <Link external {...props} />
  )
})

For example with <field>asdfads</field>. It is converted to React, but the override is ignored =)

Hello,

I have been html2react with some content and i discovered that first dom node after figure element is ignored.
Fore example if i have two paragraphs (p) after figure element, only the second one is returned.

Any ideas?

All the best
Hembo

• MDN
• Can I use?

const parser = new DOMParser();
const doc = parser.parseFromString('<div><h1>hej</h1></div>', 'text/html');

Hi,

Thanks a lot for this lib!

Are you planning on releasing a version for React v18?

Thanks,

This is because React v16 no longer provide *DOMPropertyConfigs.

Issued in the react repo: facebook/react#10391

It could look like this:

const reactifier = html2react({ a: Link })

const reactComponents = reactifier(content)

for the regular API it would imply only reverting the order of the arguments:

const reactComponents = html2react({
  a: Link
}, content)

This way it's easy to provide a common wrapping when makes sense to use the same setup in multiple places.

Currently it is only possible to use simple selectors such as type selectors (p), attribute selectors ([attr]), class selectors (.class), ID selectors (#id), etc.

It's not possible to do more advanced selectors such as descendant selectors (div p), child selectors (div > p), adjacent sibling selectors (h1 + p) and pseudo-class selectors (p:first-child, p:nth-child(3)).