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
Related
We use Reakit dialogs to prompt users to take an action in our React web app.
On some pages, we have specific text related to the action and would like to render this specific content in the dialog. On all other pages, we want to fall back to generic text.
Our simplified component hierarchy for generic pages looks like:
<BaseLayout>
...
</BaseLayout>
and for a page where we want to show specific text,
<BaseLayout>
...
<SpecificPage/>
...
</BaseLayout>
What we'd like to happen is:
On pages that render the SpecificPage component, the Dialog appears with the specific text
On pages that do not render the SpecificPage component, the Dialog appears with the fallback generic text
Our approach was to have the SpecificPage component render a Dialog with the page-specific text, and the BaseLayout component render a Dialog with the generic fallback text, but this approach isn't ideal -- users see a flash of the BaseLayout dialog before the SpecificPage dialog is rendered. Is there any way to define a single component that is "overridden" by descendants in the component hierarchy, or other way to achieve this conditional rendering?
You can simply check if you're rendering anything as children in the BaseLayout component or not, If not you can fallback to generic text.
Here's an example.
App Component
import React from 'react';
import { BaseLayout } from './BaseLayout';
export function App(props) {
return (
<div className='App'>
<BaseLayout>
<h1>Hello World.</h1>
</BaseLayout>. // Renders hello world
<BaseLayout /> // Render generic text
</div>
);
}
Base Layout Component
import React from 'react';
export function BaseLayout({children}) {
return (
<div>
{children ? children : "Some Generic Text"}
</div>
);
}
See https://github.com/ariakit/ariakit/discussions/1266#discussioncomment-2617748 for a solution and CodeSandbox that solves this problem well using the Constate library.
This is a sample ReactJS Code:
import React from 'react';
import './App.css';
function App() {
doument.getElementById("my-id1").innerHTML = "Some Text Here"
return (
<div className="App">
<p id="my-id1"></p>
</div>
);
}
export default App;
But while Running the syntax of document.getElementById() in React Native, I get a runtime error.
What should I use instead of document.getElementById() in React Native to achieve the exact same output
I see that you want to insert text in a html tag. In React props are used to tell the component what properties it will have, sample:
const SampleComponent = props => {
return (<p> {props.text} </p>)
};
in your component:
return (
<SampleComponent text = {"Hi world"} />
)
This is a basic pattern in designing a view using React or React native. Note that you must not use HTML in react native, you must use its native analogs (View, Text, TextInput for xample).
Hi I'm not sure what you want to try to do in React Native with that.Can you plz explain maybe I'll be able to help.
doument.getElementById("my-id1").innerHTML = "Some Text Here"
is not possible in react native.
You can use useState() or states in react native to do it.
Let me know if you need more information on that.
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 am having hard time understanding how I should structer my project.
I am using react with material UI and css modules.
Problem is that god knows why, all styling from MUI loads at the bottom of the header same as css module styling.
After some research I found two solutions:
Use !important inside css modules which is terrible.
Changing the injection order https://material-ui.com/guides/interoperability/#css-modules
Problem with the second one is that it would be terrible tedieouse in a multi component project where every time you introduce a new component you have to load it manually as in the example. Am I missing something obvious? Do you have any ideas how to easier change the load order?
According to the Material-UI documentation, you should add a <StylesProvider/> component, which wraps your component tree.
import { StylesProvider } from '#material-ui/core/styles';
<StylesProvider injectFirst>
{/* Your component tree.
Styled components can override Material-UI's styles. */}
</StylesProvider>
If injectFirst is set (and true of course), the Material UI style tags will be injected first in the head (less priority)
I think you may be misunderstanding something in the example. There isn't anything you need to do on a per-component basis to change the load order.
The steps are as follows:
1. In your index.html add a comment like <!-- jss-insertion-point --> into the head where you would like the jss CSS to be inserted.
2. In your index.js (or somewhere at or near the top of your rendering hierarchy) create the jss configuration to indicate the name of the insertion point comment:
import JssProvider from "react-jss/lib/JssProvider";
import { create } from "jss";
import { jssPreset } from "#material-ui/core/styles";
const jss = create({
...jssPreset(),
// We define a custom insertion point that JSS will look for injecting the styles in the DOM.
insertionPoint: "jss-insertion-point"
});
3. Wrap your top-level element in the JssProvider to put those configurations in play (no component-specific steps):
function App() {
return (
<JssProvider jss={jss}>
<div className="App">
<Button>Material-UI</Button>
<Button className={styles.button}>CSS Modules</Button>
</div>
</JssProvider>
);
}
I've created a CodeSandbox similar to the one pointed at by the Material-UI documentation except that this one uses the create-react-app starting point, so the dependencies are simpler.
In version 5 MUI changed the import and some components became deprecated.
By default, the style tags are injected last in the <head> element of the page. They gain more specificity than any other style tags on your page e.g. CSS modules, styled components.
Not in the documentation, but the StyledEngineProvider component has an injectFirst prop to inject the style tags first in the head (less priority):
<StyledEngineProvider injectFirst>
<MUIThemeProvider theme={theme}>
{children}
</MUIThemeProvider>
</StyledEngineProvider>
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!