Is there a way to pass in a web React component to WebView directly? Something like this-
import ReactContainer from 'somewhere';
import { WebView } from "react-native-webview";
<WebView
source={{ html: "<ReactContainer/>" }}
></WebView>
You can render a React component to its initial HTML with renderToString() and then display it inside your WebView like so:
import { renderToString } from 'react-dom/server'
import ReactContainer from 'somewhere';
import { WebView } from "react-native-webview";
<WebView source={{ html: renderToString(<ReactContainer />) }}></WebView>;
More infos about ReactDOMServer here.
if you want to load HTML directly, you can use the html property in WebView’s source property, as shown below:
<WebView
originWhitelist={['*']}
source={{ html: '<h1>Hello world</h1>' }}
/>
for more details of react-native-web-view you can learn from here
https://blog.logrocket.com/the-complete-guide-to-react-native-webview/
https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md
No, there is not. React.js and React native shares the same syntax but are really different framework: they follow different rules and are build in a different way.
Inside a webview, there is no react framework avaiable or runtime (unless you import React.js as a <script> tag as a website would).
However, as some other answer pointed, you can use renderToString() and it will work in some situations (it just precompile your component, it does not provide exactly what you want) - it's more a hack than a solution.
Related
I'm having a problem with importing SVG files in React JS.
import { ReactComponent as Logo} from '../logo.svg'
i don't know why but in some components <Logo /> will render correctly
while in other components it doesn't show, the SVG is there when i use inspect and it does take the space it needs but the SVG is blank / empty.
anyone else encountered this issue?
Try:
import { default as logo } from '../logo.svg';
and use as source in a node of type img, like this:
<img src={logo} />
I had the same exact issue and wrapping the logo component in an svg tag or div made it render on to the screen for me. I can also change the SVG color by setting it from the logo as well.
import { ReactComponent as Logo} from '../logo.svg'
<svg><Logo fill="blue" width="100%" height="100%" /></svg>
// or...
<div><Logo fill="blue" width="100%" height="100%" /></div>
Without the <svg> or <div> tag wrapped around it, it was rendering a blank image, taking up the space and all but no visuals. Once I added the wrapper tag around it, it worked. I like this approach since you can dynamically change the SVG styling based on user input.
I had same problem, for some it was how i imported them so I resolved this by using:
import {ReactComponent as Icon} from 'pathtoyourfile.svg
then use as:
<Icon />
Other times however, and I have fallen foul to this a few times, SVG's often have similar class and id names, so if you check the file you might see clip0, image0, pattern0 etc. If you have multiple svg's good chance the ID's and Class names are clashing and are overriding each other. For me the easiest solution was to change the naming convention manually, not sure if a more automated solution exists?
You could do it like so
import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image
console.log(logo); // /logo.84287d09.png
function Header() {
// Import result is the URL of your image
return <img src={logo} alt="Logo" />;
}
export default Header;
I checked, only create-react-app could use SVG as a component
https://create-react-app.dev/docs/adding-images-fonts-and-files/#adding-svgs
Note: this feature is available with react-scripts#2.0.0 and higher,
and react#16.3.0 and higher.
Am trying to run some html tags am getting from an api but finding it difficult to make the performance as good as native
I have tried using react-native-webview but having serious performance issues with it.
I have also tried react-native-render-html but also had some issues with running some tags like , and inline styles same with react-native-htmlview. It renders every other tag correctly with native performance
This is an example of an html string am getting from an api (toRender)
import React, {Component} from 'react'
import HTML from 'react-native-render-html';
const toRender = "<p style='text-decoration: underline'>divide <sup>10<sup>/<sub>2</sub></p>"
class QuestionScreen extends Component{
render{
return(
<View style={{ flex: 1 }}>
<HTML
html={toRender}
/>
</View>
)
}
}
export default QuestionScreen
I'm using [svg-inline-loader][1] to inline SVG Images in my React Application.
When I import an SVG, the webpack module passes it to the variable as an HTML string. I need to convert this string into a React Component so that I can pass additional props to it.
My current code looks like this
import SVGlogo from './logo.svg';
export default () => (
<a href="/" className="navbar-item is-purple" dangerouslySetInnerHTML={{ __html: SVGlogo }} />
);
This works fine but I need to pass additional attributes/props to SVGlogo. Is there a way I can do this elegantly without manually modifying the string and adding attributes to it.
I highly recommend to built an own non class component for your SVG stuff and then import it into the section / HOC component.
See my example here:
Greetings!
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'm still learning React.js. Recently I've built a site using React.js. I was trying to add a demo page (pure html and javascript) to the react site. The demo page consists of an index.html, a bundle.js and a css stylesheet. I created a demo folder at the root of the react site and put the demo files inside that folder. My question is how I can get access to the demo page by going to http://reactsite/demo/
Do I have to use react router and wrap the demo page into a react component?
Thanks in advance!
To render pure html in with react yes you would need to use react-router to render a component at that url and then use dangerouslySetInnerHTML to read the html file as real html and not escape characters in the file
your route would be something like this
<Route path="demo" component={TemplateHTMLComponent} />
then your component would be something like this
const htmlFile = require('../some/path/to/html/file');
class TemplateHTMLComponent extends React.Component {
render() {
return <div dangerouslySetInnerHTML={{ __html: htmlFile}};
}
}