I have a TextField component for template. now I want to use it in other components and can change style of template in that components
in this project I use functional component and react-redux
I have a site that is not a spa. At one point when a button is click a div is created in the dom. After the div is created I want to render a React component into this div. My component looks like this
import React, { Component } from 'react';
class MyComponent extends Component {
constructor(props) {
super(props);
this.state = {
date: null
};
}
render() {
return (
<div>
//Here will be more controls
</div>
);
}
}
I'm running webpack on this file and in my original page I'm referencing the generated js file.
What code should I add to my button click code that is adding the div so I can render the component?
ps. Actually the functionality is a bit more complex, because we are scraping a page the user specifies and showing the html in an iframe through the srcdoc attribute. The scraped html has the div added and then we render a widget in the div so the user can preview what our widget would look like on their page.
You have to use ReactDOM to render the component. Install and import react-dom in your project so that webpack bundles it for you. You might need to expose ReactDOM as global in your web pack configuration.
Below is a simple code snippet:
ReactDOM.render(
<MyComponent/> ,
document.getElementById(id) // id of element in your case div created
);
Reference
https://reactjs.org/docs/react-dom.html
I have a react app, I would like to process react components and modify classNames before they are rendered to DOM. Is there any way to do that?
For example transform <div className='bg-primary' /> to <div className='background-blue' />.
I've was testing the react-sketchapp which looks pretty neat so far.
Besides rendering the default sketch elements like Text,View,Image and so on, would it be possible to render a default react component containing HTML-Markup styled with scss?
I tried rendering the following Hello-Component:
import React from 'react';
import { render, Artboard, Text, View } from 'react-sketchapp';
const Hello = () => (
<View
name={`Hello View`}
>
<Text name="Hello Text">
<span>Hello World</span>
</Text>
</View>
);
const Document = () => (
<Artboard
name="Hello Board"
>
<Hello />
</Artboard>
);
export default (context) => {
render(<Document />, context.document.currentPage());
}
but I get the following error:
Could not find renderer for type 'span' flexToSketchJSON
Is rendering default react components including html / css to Sketch possible?
You can't render HTML elements to Sketch, same as you can't render HTML elements to React Native.
React is just a way of managing a tree of abstract components. How to render these components needs to be defined by the specific renderer you are using. react-sketchapp is a renderer that understands components which render to Sketch elements, but it does not understand HTML elements such as div. (and React Native includes a renderer which knows how to render React Native components to native mobile views, react-music is a renderer which knows how to render React Music components into audio, and so forth).
React, in and of itself, has nothing to do with HTML elements or the DOM. The react-dom renderer library is where the magic of rendering into the DOM happens. If you want to render HTML elements to Sketch, you'll need to write a React renderer which knows how to convert HTML elements to Sketch's file format.
You can export any HTML/CSS to Sketch using html-sketchapp.
It is possible.
Try looking into using React-Primitives with React-SketchApp.
https://github.com/lelandrichardson/react-primitives
It's in a few examples within React-SketchApp e.g.
https://github.com/airbnb/react-sketchapp/tree/master/examples/profile-cards-primitives
I have a react component that in essence renders a contentEditable div. It is uncontrolled in that react doesn't control the content of the div.
class UncontrolledDiv extends React.Component<{}, void>{
public render(): JSX.Element {
return (<div contentEditable='true'></div>);
}
}
[This is a simplified version of a content-editable div that I have written]
I have functionality that clears the content of the div when a button is clicked. I want to unit test the same and so I want to manipulate the dom by actually adding content to the div and checking if it gets cleared when the button is pressed.
Any pointers as to how I can achieve this?
PS: I'm using enzyme as a test framework