I'm in the process of applying a modal using the Semantic UI React library. When the modal is triggered it starts flickering and I can't for the life of me figure out why. Any help is appreciated.
Prior to using Semantic I did install Bootstrap but that was removed when Semantic was introduced to this project. Others having the flickering issue resolved it by removing Bootstrap. But because I had previously removed it and the flickering continues, I'm at a loss. I did delete my package-lock.json and ran npm install but that unfortunately didn't fix this issue.
And before I forget, the flickering does happen on both Chrome and FF.
The following path shows how all the files coming into contact with the modal are laid out.
index.js
|_App.js
|_Router.js
|_EventPage.js
|_Jumbotron.js
|_QuizModalMike.js
- Note: this is a group project and not all the code was written by me.
QuizModalMike.js
The code for my "Multiple Modals" modal is a carbon copy of the example found here. Blinking happens even though no changes were applied.
import React, { Component } from 'react'
import { Button, Icon, Modal } from 'semantic-ui-react'
class NestedModal extends Component {
state = { open: false }
open = () => this.setState({ open: true })
close = () => this.setState({ open: false })
render() {
const { open } = this.state
return (
<Modal
dimmer={false}
open={open}
onOpen={this.open}
onClose={this.close}
size='small'
trigger={<Button primary icon>Proceed <Icon name='right chevron' /></Button>}
>
<Modal.Header>Modal #2</Modal.Header>
<Modal.Content>
<p>That's everything!</p>
</Modal.Content>
<Modal.Actions>
<Button icon='check' content='All Done' onClick={this.close} />
</Modal.Actions>
</Modal>
)
}
}
const ModalExampleMultiple = () => (
<Modal
// ------------- fix -------------
className="scrolling"
// -------------------------------
trigger={<Button>Multiple Modals</Button>}>
<Modal.Header>Modal #1</Modal.Header>
<Modal.Content image>
<div className='image'>
<Icon name='right arrow' />
</div>
<Modal.Description>
<p>We have more to share with you. Follow us along to modal 2</p>
</Modal.Description>
</Modal.Content>
<Modal.Actions>
<NestedModal />
</Modal.Actions>
</Modal>
)
export default ModalExampleMultiple
Jumbotron.js
import React, { Component } from 'react';
import {
Segment,
Container,
Header,
Button,
Icon,
Label,
Divider
} from 'semantic-ui-react';
import ModalExampleMultiple from './QuizModalMike';
class Jumbotron extends Component {
state = {};
render() {
return (
<div>
<Segment
inverted
textAlign="center"
style={{
minHeight: 700,
padding: '1em 0em',
display: 'flex',
flexDirection: 'column'
}}
vertical
>
<Segment
inverted
style={{
fontSize: '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: '1em',
alignSelf: 'left'
}}
/>
<Container text>
<Header
as="h1"
content="Coffee Meets Code Event"
inverted
style={{
fontSize: '4em',
fontWeight: 'normal',
marginBottom: 0,
marginTop: 0
}}
/>
<Header
as="h2"
content="Network with developers and technical recruiters from high quality companies."
inverted
style={{ fontSize: '1.7em', fontWeight: 'normal' }}
/>
{/* <QuizModal /> */}
<ModalExampleMultiple />
</Container>
</Segment>
</div>
);
}
}
export default Jumbotron;
EventPage.js
import React, { Component } from 'react';
import Jumbotron from './Jumbotron';
import Description from './Description';
import Participants from './Participants';
class EventPage extends Component {
state = {}
render(){
return (
<div>
<Jumbotron />
<Description />
<Participants />
</div>
);
}
}
export default EventPage;
Router.js
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import { connect } from 'react-redux';
import * as actions from '../actions';
import Header from './common/Header';
import Landing from './landing/Landing';
import EventPage from './event/EventPage';
class Router extends Component {
componentDidMount() {
this.props.fetchUser();
}
render() {
return (
<div>
<BrowserRouter>
<div>
<Header />
<Route exact path="/" component={Landing} />
{/* Temporary link for development */}
<Route exact path="/event-page" component={EventPage} />
</div>
</BrowserRouter>
</div>
);
}
}
export default connect(null, actions)(Router);
App.js
import React, { Component } from 'react';
import Router from './Router';
class App extends Component {
render() {
return (
<div>
<Router />
</div>
);
}
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import reduxThunk from 'redux-thunk';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import 'semantic-ui-css/semantic.min.css';
import reducers from './reducers';
const store = createStore(reducers, {}, applyMiddleware(reduxThunk));
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"proxy": {
"/auth/*": {
"target": "http://localhost:1738"
},
"/api/*": {
"target": "http://localhost:1738"
}
},
"dependencies": {
"axios": "^0.17.1",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-router-dom": "^4.2.2",
"react-scripts": "^1.1.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"semantic-ui-css": "^2.2.12",
"semantic-ui-react": "^0.77.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
