deschtex / html2react Goto Github PK
View Code? Open in Web Editor NEWA utility for turning raw HTML into React elements.
License: MIT License
A utility for turning raw HTML into React elements.
License: MIT License
This is because React v16 no longer provide *DOMPropertyConfig
s.
Issued in the react repo: facebook/react#10391
For example with <field>asdfads</field>
. It is converted to React, but the override is ignored =)
Hi,
Thanks a lot for this lib!
Are you planning on releasing a version for React v18?
Thanks,
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} />
)
})
See https://www.w3.org/TR/html-markup/syntax.html#syntax-elements for list of void element tags
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.
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
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
const parser = new DOMParser();
const doc = parser.parseFromString('<div><h1>hej</h1></div>', 'text/html');
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)
).
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.