When using React, I am able to access an element using the ref callback once it is rendered on the browser. If the child element exceeds the parent element, the content needs to be manually parsed as it comes from an API call and is not parsed by React.
Note - Currently, I am accessing the element via a react ref callback and attempting to modify it using plain JavaScript. Will this affect the component re-rendering in React? If yes, how can we handle it in React? Or is it okay to modify the DOM directly using plain JavaScript?
(function (e) {
// How to add an icon at the end of the image if the size of the image exceeds the container
}})(window,document)
const parent = element.getBoundingClientRect();
const imgTags = element.querySelectorAll("img");
imgTags.forEach(imgTag => {
const imgBoundingRect = imgTag.getBoundingClientRect();
if (imgBoundingRect.width > parent.width) {
const parent = imgTag.parentNode;
const wrapper = document.createElement('div');
wrapper.classList.add(styles.horizontalScroll);
parent.replaceChild(wrapper, imgTag);
wrapper.appendChild(imgTag);
}
});
.horizontalScroll {
overflow-x: auto;
}
But I am unsure how to replace the scrollbar with an icon that when clicked, moves instead of scrolling.
Looking for output like this https://i.sstatic.net/03YFt.png
When the image is loaded, and its width exceeds the parent's width, I want to dynamically create nodes using Plain JS. I have managed to capture the width and add overflow, but I'm unsure how to add a button to the node with styling.
Update : React code snippet for getting the Ref
<div dangerouslySetInnerHTML={createMarkup(myContent)} // This is a set of <p> tags which may or may not contain images inside them coming from the server. Sometimes these images move out of view due to lack of attached style props.
className={classNames(styles.data, externalStyle)}
ref={(input) => {
if (input) {
myJSFunction(input); // this is the Input
}
}}
/>