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!
Related
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.
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.
I'm very new to react and I just want to use this https://github.com/jackocnr/intl-tel-input plugin in my form. But in the documentation says to use pure js input id query selector to use plugin. But how can I change this kind of code to react usage.
code example in doc:
<input type="tel" id="phone">
<script src="path/to/intlTelInput.js"></script>
<script>
var input = document.querySelector("#phone");
window.intlTelInput(input);
</script>
You should avoid to use Jquery in React projects. You can do it React way.
For intl-tel-input, there is react-intl-tel-input and react-intl-tel-input-v2 packages are available.
import ReactIntlTelInput from 'react-intl-tel-input-v2';
import 'intl-tel-input/build/css/intlTelInput.css';
<ReactIntlTelInput
value={this.state.value}
onChange={this.onChange}
/>
Demo
It's not a good idea to manipulate the DOM manually since react creates a virtual DOM for performance issues
React creates a tree of custom objects representing a part of the DOM.
For example, instead of creating an actual DIV element containing a UL
element, it creates a React.div object that contains a React.ul
object. It can manipulate these objects very quickly without actually
touching the real DOM or going through the DOM API. Then, when it
renders a component, it uses this virtual DOM to figure out what it
needs to do with the real DOM to get the two trees to match.
You can think of the virtual DOM like a blueprint. It contains all the
details needed to construct the DOM, but because it doesn't require
all the heavyweight parts that go into a real DOM, it can be created
and changed much more easily.
source
There's a lot of "ready-made" react components that you can use. You can use react-phone-number-input for example like this:
import React, { useState } from "react";
import ReactDOM from "react-dom";
import "react-phone-number-input/style.css";
import PhoneInput from "react-phone-number-input";
import "./styles.css";
function App() {
const [inputValue, setInputValue] = useState("");
return (
<div className="App">
<h1>International phone number</h1>
<PhoneInput
placeholder="Enter phone number"
value={inputValue}
onChange={inputValue => setInputValue(inputValue)}
/>
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Take a look at codesandbox
If you want to learn more about how React manipulates the DOM, you can read this article.
For example if I have an albums.jsx file in which I wrote:
import ripple from 'material-ui/ripple'
then in my element I can use:
return <div className={ripple}><div>
So that this div will have ink/ripple effect. This can be done in Angular Material via a class name, so I imagine there should be a similar feature in Material-UI/react-md
You have to import it like this:
import TouchRipple from 'material-ui/internal/TouchRipple';
Then use in your component like this (TouchRipple is basically a higher-order component):
<TouchRipple>
<div>
MY RIPPLING DIV
</div>
</TouchRipple>
If you need to solve the problem with classNames instead of a HOC, I suggest to use react-materialize -> https://react-materialize.github.io/#/
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