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
Related
I am using prime-react to style my React page. But I want a more compact website with very few padding and minimum styling. For this purpose, I want to override a few CSS properties for the prime-react components.
For eg, I am trying to reduce the padding for the MenuBar -
HomePage.js
import {React, Component } from 'react';
import { Menubar } from 'primereact/menubar';
import 'primereact/resources/themes/saga-blue/theme.css';
import 'primereact/resources/primereact.min.css';
import 'primeicons/primeicons.css';
import styled from "styled-components";
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<div>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</div>
);
}
}
const ComponentView = styled(HomeMenuBar)`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`;
The above code makes no difference to the original styling.
I am trying to make use of this component.
However, particularly using these styled-components I don't like it. I am new to react and would like to know if there are better alternatives like, storing the CSS properties in another file and then importing it in the required file. I tried this part but it also didn't work out.
I work with react over a year and have seen lot of different ways to customise components and so far, I think that styled-components is the most convenient way to customize components if you cook them right.
I love to put all customized components with styled to a separate file near the index.js called styled.js of Component.js and Componnet.styled.js (in the separate folder of course MyComponent/index.js);
In styled.js you export all components like this:
export const Container = styled.div`
.p-menubar .p-menubar-root-list > .p-menuitem > .p-menuitem-link {
padding: 0.1rem 1rem !important;
}
`
In index.js file you inport them like this:
import {Container} from './styled'
// or import * as Styled from './styled' (if you have a lot of customized components);
export default class HomeMenuBar extends Component {
// menu code ...
render() {
return (
<Container>
<div className="card">
<Menubar model={this.items} className={this.props.className} />
</div>
</Container>
);
}
}
If you want to try something more like classic css try to look at css-modules.
This article can help https://www.triplet.fi/blog/practical-guide-to-react-and-css-modules/
You can also try patch-styles, a more declarative way to apply CSS/SCSS modules to your code. Also, check out the StackBlitz example.
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 building a React app that takes in a lot of data from temperature sensors at several different places and displays the data with chart.js.
I have made one component that fetch data from one place and that component is called from App.js, so now I could copy this component / or fetch data from another place if I implement it that way.
Next step is to find a way to swipe through these components. I don't know what to use or how I would go about to solve this, so I'm looking for ideas on how to solve this.
I have tried using react-swipeable-views. Code is provided in this post. This seems to be a simple solution, but I'm not sure if it's a good idea to do like this. I guess it would be quite heavy with large data sets? If I understand the way React works it would pull in data from all components to a browser and then hide it until it's showed?
I have also looked at this article: https://coursework.vschool.io/react-transitions-with-react-transition-group/
Here react-transition-group is used, but I'm not sure on how to implement the swipe part here since that is not discussed in the article.
Any ideas on how to solve this?
import React, {Component} from 'react';
import Test from './Test';
import SwipeableViews from 'react-swipeable-views';
const styles = {
slide: {
padding: 15,
minHeight: 800,
color: '#fff',
},
slide1: {
background: '#FEA900',
},
slide2: {
background: '#B3DC4A',
},
slide3: {
background: '#6AC0FF',
},
};
class App extends React.Component{
constructor(){
super();
this.state={
foo: 'bar'
}
}
}
render(){
return(
<div className="App">
<SwipeableViews enableMouseEvents>
<div style={Object.assign({}, styles.slide, styles.slide1)}>
slide n°1
<Test /> // <-- This would be a component with large data sets
</div>
<div style={Object.assign({}, styles.slide, styles.slide2)}>
slide n°2
</div>
<div style={Object.assign({}, styles.slide, styles.slide3)}>
slide n°3
</div>
</SwipeableViews>
</div>
)
}
export default App;
I have not used it before but looking at the docs, using react-swipeable-views should be fine, since it "quickly renders the first slide, then lazy-loads the others." (from https://github.com/oliviertassinari/react-swipeable-views). Furthermore you can customize how many slides before and after the currently displayed one are being rendered (see https://react-swipeable-views.com/api/api/#virtualize).
Also, it might be a good idea, to catch up on some react concepts (https://reactjs.org/docs/introducing-jsx.html). React does not "hide" any components, it only renders the ones you choose to the DOM and updates what is necessary to get the DOM to reflect your state. So for example, if you have multiple pages (p1, p2, p3), each rendering one component (c1, c2, c3), while being on page p1, only the component c1 would be rendered to the DOM.
I am trying to add Slimscroll to a ReactJS app and I see the scrollbar reflect in the browser dev tools but I am getting an error in the console and the UI is breaking. AS a sidenote, the app compiles successfully.
This is my App.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'react-redux';
import classnames from 'classnames';
import 'jquery-slimscroll/jquery.slimscroll.min';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
class App extends Component {
componentDidMount() {
$(".scroll").slimscroll({
height: '100%'
});
}
render() {
<MuiThemeProvider muiTheme={getMuiTheme(materialUITheme)}>
<div id="app-inner">
....blah blah blah....
</div>
</MuiThemeProvider>
};
}
module.exports = App;
Then in the index.html I added the scroll class to the <body>
I intend to use this on other places with an overflow like scrolling tables or lists, so I'd rather have the slimscroll function attached to a utility class I can re-use (i.e. scroll)
As you can see below, the slimscroll is passing to the DOM
But the UI breaks because ReactJS doesn't like the method I used in some way.
Lots of things not working (i.e. the menu, the page displays partially, etc)
How can I add slimscroll to ReactJS. I looked at react-scrollbar in npm but it requires to wrap the element in <ScrollBar></ScrollBar> and I can't do that to the body
This might not be a direct answer to your question. But it will solve your original problem. IMO It's not a good idea to use jQuery plugins with React. But you can use react-scrollbar as your main container without no visual difference from adding scrolls to the body. Here is a small example.
import React from 'react';
import { render } from 'react-dom';
import { Scrollbars } from 'react-custom-scrollbars';
const App = () => (
<Scrollbars style={{ height: "100vh" }}>
<div style={{height:"2000px"}}/>
</Scrollbars>
);
render(<App />, document.getElementById('root'));
Also, make sure your html and body have no margins.
html, body{
margin: 0px;
}
Working Example: https://codesandbox.io/s/orLx4ZlL
I'm trying to get familiar with react and web development. And made my first steps.
Right now I'm using react with react-bootstrap & css modules.
In the main.html I had to include the bootstrap.css file.
I would like to replace my searchbar with react-autosuggest
It seems like bootstrap is breaking the style of react-autosuggest. Is it possible to combine both? Or is it a bad practice?
That is my code where I tried to use both searchbars:
import React, {Component} from 'react';
import styles from './App.css';
import Search from "./Search/Search"
import SearchAuto from "./SearchAuto/SearchAuto"
class App extends Component {
render() {
return (
<div>
<div className={styles.App}>
<h1>Title</h1>
<Search onSearch={this.searchForAddress}/>
</div>
<SearchAuto onSearch={this.searchForAddress}/>
</div>
);
}
}
export default App;
Any help would be greatly appreciated!