CODEWITHSUNDEEP
reactjsreduxbootstrap-4react-reduxbootstrap-modal
Alnoor Khan
Alnoor Khan

Reputation: 53

Using Bootstrap and jQuery library in React+Redux Project

Is using jQuery library and Bootstrap Library a problem in React+Redux Project.

I have added the library in my index.html

<!doctype html>
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
    <title>Sample</title>
  </head>
  <body>
    <div id="root"></div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous">
</script>
  </body>
</html>

Need Bootstrap for bootstrapmodel, bootstrapmenu etc and many other components available in bootstrap.

Tried react-bootstrap but the functionality isn't fulfilled by that.

Upvotes: 1

Views: 124

Answers (3)

kiranvj
kiranvj

Reputation: 34107

Need Bootstrap for bootstrapmodel,bootstrapmenu etc and many other components available in bootstrap

You need to manipulate class to show modal and menu.

Better use reactstrap Its a react wrapper around bootstrap components.

Check the modal code here

/* eslint react/no-multi-comp: 0, react/prop-types: 0 */

import React from 'react';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class ModalExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      modal: false
    };

    this.toggle = this.toggle.bind(this);
  }

  toggle() {
    this.setState({
      modal: !this.state.modal
    });
  }

  render() {
    return (
      <div>
        <Button color="danger" onClick={this.toggle}>{this.props.buttonLabel}</Button>
        <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
          <ModalBody>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </ModalBody>
          <ModalFooter>
            <Button color="primary" onClick={this.toggle}>Do Something</Button>{' '}
            <Button color="secondary" onClick={this.toggle}>Cancel</Button>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}

export default ModalExample;

Upvotes: 2

R.shitre
R.shitre

Reputation: 71

Although it is not recommended to use jquery in react project, still if you want to use it you can. Install the jquery npm package

npm i jquery

You can find more information here: jquery-npm

Upvotes: 0

Cat_Enthusiast
Cat_Enthusiast

Reputation: 15688

Nope! This is completely acceptable in React applications.

Upvotes: 0

Related Questions