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
Related
Hello ,I am new to React and Now I would like to use MATERIAL-UI in my project but I got this error. Help me, please.
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
I Have Index.js Component:
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
ReactDOM.render(
<React.Fragment>
<App />
</React.Fragment>,
document.getElementById("root")
);
registerServiceWorker();
and App.js is the functional Component:
import React from 'react'
import Layout from './Layout/Layout'
function App() {
return <Layout/>
}
export default App
and Styles.js Component from material-ui:
import { makeStyles } from "#material-ui/styles";
const useStyles = makeStyles({
root: {
display: "flex",
height: "100vh",
width: "100%",
},
rightSidebar: {
background: "#BDC3C7",
width:'18%'
},
leftSidebar: {
background: "#BDC3C7",
width:'25%'
},
mainPart: {
background: "#BDC3C7",
flex:1
},
});
export default useStyles;
and Layout.js Component is:
import React from "react";
import useStyles from "./Styles";
function Layout() {
const classes = useStyles();
return (
<div className={classes.root}>
<div className={classes.rightSideba}>right side bar</div>
<div className={classes.mainPart}>main part</div>
<div className={classes.leftSidebar}>left side bar</div>
</div>
);
}
export default Layout;
Thank you
Start simple: What React / React DOM versions do you have?
Then: Does your environment (browser?) start multiple instances of React / React DOM? (esp. any older ones dangling around)
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.
I put the spinner on the page and I see nothing at all. There are no console of errors or anything like that.
Here is my code:
import React, { Component } from 'react';
import { Spin } from 'antd';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<Spin />
</div>
);
}
}
export default App;
The accepted answer imports all of the library styles.
Here's a preferred way to do so
import Spin from 'antd/es/spin';
import 'antd/es/spin/style/css';
I believe you have forgotten to import the CSS for AndD.
#import '~antd/dist/antd.css';
https://ant.design/docs/react/use-with-create-react-app
The proposed solution by #HalfWebDev doesn't explain that why one should import the CSS at the component level.
Probably this is the reason Remove global Styles
But I would like to add that the proposed solution by #HalfWebDev still doesn't work. Which is to import the component level CSS only like this
import 'antd/es/spin/style/css';
The above CSS still continues adding some global styles and disturbs my styling.
Instead importing the CSS with this method worked for me
import 'antd/lib/spin/style/index.css';
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!
I am attempting to make a small web app with React that involves a map. I'm using the HERE Maps react component (this is non-negotiable) but I'm having trouble getting the map to show up. I'm not sure if it's the Key or my understanding of React (which is small), that's causing the issue.
Map Component
import React from "react";
import { connect } from "react-redux";
import HEREMap from "react-here-maps";
#connect((store) => {
return {
};
})
export default class Map extends React.Component {
render() {
console.info(HEREMap);
const style = {
width: "100%",
height: "100%"
};
return <div style={style}>
<h1>Hello HERE</h1>
<HEREMap
appId="<ID>"
appCode="<CODE>"
center={{ lat: 51.5, lng: 0 }}
zoom={14}
/>
</div>
};
};
Main
import React from "react"
import ReactDOM from "react-dom"
import { Provider } from "react-redux"
import Map from "./components/Map"
import Layout from "./components/Layout"
import store from "./store"
const app = document.getElementById('app')
ReactDOM.render(
<Provider store={store}>
<Map />
</Provider>, app);
I noticed this in you code listing:
const style = {
width: "100%",
height: "100%"
};
A common problem is that the height of a block element like <div> defaults to the height of the block's content. By specifying it as a percentage like 100%, it will be the height of the element's parent which if it's just an empty container with no content will have a height of 0 and therefore not be visible.
The answers in Percentage Height HTML 5/CSS might be helpful for finding alternatives like setting the height of the body element.
There may also be something else going on as the react-here-maps package has a few issues, but you said that wasn't negotiable. For anybody else looking for a more standalone demonstration, the Use HERE Interactive Maps with ReactJS to Pick a Theme might be helpful. In the source example there, the height is fixed at 400px.