Comments (11)
from html-react-parser.
@remarkablemark Hi, Not working
import React, { useState, useEffect } from 'react';
import parse from 'html-react-parser';
function ResizableHTMLContent() {
const [htmlContent, setHtmlContent] = useState('');
useEffect(() => {
fetch('/file.txt')
.then(response => response.text())
.then(html => {
setHtmlContent(html);
})
.catch(error => {
console.error('Error fetching HTML content:', error);
});
}, []);
return (
<div>
<h1>HTML Content</h1>
<div style={{ scale: 1 }}>
{parse(htmlContent)}
</div>
</div>
);
}
export default ResizableHTMLContent;
from html-react-parser.
If you want it smaller, you need to use a scale smaller than 1
(e.g., 0.7
)
Also, this question fits more at Stackoverflow than here since this is a styling question and not an html-react-parser
question, so I'll be closing this issue
from html-react-parser.
@remarkablemark I set it to 0.5 and also 0.7 it's not changing its size, please helpπ
from html-react-parser.
@remarkablemark Hi, I still couldn't figure out the problem I posted on Stackoverflow no one replied can you please help me, Mark?
from html-react-parser.
Can you share a CodeSandbox or JSFiddle of your issue?
from html-react-parser.
@remarkablemark Yes, sure here is the CodeSandBox
from html-react-parser.
It says Sandbox not found
:
Did you fork and save the sandbox?
from html-react-parser.
@remarkablemark Sorry to hear that I made it public now https://codesandbox.io/p/devbox/w9n5ny?file=%2Fsrc%2FApp.jsx%3A9%2C14&layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cls3k4c8u0009336jdsa5lpyv%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cls3k4c8r0003336jmqfwi7h9%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cls3k4c8s0006336jjx8nn9ki%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cls3k4c8t0008336jec1ohvzs%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cls3k4c8r0003336jmqfwi7h9%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls3k4c8r0002336jv2kyckfe%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522initialSelections%2522%253A%255B%257B%2522startLineNumber%2522%253A9%252C%2522startColumn%2522%253A14%252C%2522endLineNumber%2522%253A9%252C%2522endColumn%2522%253A14%257D%255D%252C%2522filepath%2522%253A%2522%252Fsrc%252FApp.jsx%2522%257D%255D%252C%2522id%2522%253A%2522cls3k4c8r0003336jmqfwi7h9%2522%252C%2522activeTabId%2522%253A%2522cls3k4c8r0002336jv2kyckfe%2522%257D%252C%2522cls3k4c8t0008336jec1ohvzs%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls3k4c8t0007336j75evqk9i%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522dev%2522%252C%2522port%2522%253A5173%252C%2522path%2522%253A%2522%252F%2522%257D%255D%252C%2522id%2522%253A%2522cls3k4c8t0008336jec1ohvzs%2522%252C%2522activeTabId%2522%253A%2522cls3k4c8t0007336j75evqk9i%2522%257D%252C%2522cls3k4c8s0006336jjx8nn9ki%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cls3k4c8s0004336jezag6wkf%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522dev%2522%257D%252C%257B%2522id%2522%253A%2522cls3k4c8s0005336jboqxzitu%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522cls3hs8v0000ldlh06nkidog2%2522%257D%255D%252C%2522id%2522%253A%2522cls3k4c8s0006336jjx8nn9ki%2522%252C%2522activeTabId%2522%253A%2522cls3k4c8s0004336jezag6wkf%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D
from html-react-parser.
@remarkablemark Any idea how to fix it?
from html-react-parser.
@remarkablemark Hi Mark, Do you need my code Github repo?
from html-react-parser.
Related Issues (20)
- attributesToProps converts attribute with key name "open" always to value `true` HOT 2
- Warning with nextjs use - Extra attributes from the server HOT 3
- If the htmlString is dynamic and contains custom components (with hooks used), an error will be hanpend HOT 1
- missing type for domNode.children HOT 4
- Issue after 5.0.9 update HOT 3
- Cannot Handle Microsoft Meeting Link HOT 3
- Add Current Node Index in `replace` Callback HOT 6
- Replacing domNode with editor element multiple times breaks editor bubble menu HOT 4
- Method transform has wrong current index HOT 5
- Validate props beforing passing the props object to the element HOT 3
- SVG html with large Data URL returns empty SVG code HOT 2
- Importing the lib with a very large size HOT 2
- important style is not parsed HOT 13
- Resolution error when using TypeScript with `moduleResolution` set to `node16` or `nodenext` HOT 3
- How to keep a specific element from being transformed by React? HOT 2
- Type of `parse` is `any` HOT 2
- Version 5.1.5 - multiple versions of @types/react causes typescript build errors HOT 6
- Incompatible default exports between ESM and CJS HOT 5
- domNode to HTML string? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from html-react-parser.