How install a Bootswatch theme on React project?

Question

I created a React project and I would like to install on it a bootswatch theme.

The theme is display but some component of it that use js don't work. Like modal or dropdown.

I followed there install documentation: - npm install bootswatch - import it css files

I tried to install bootstrap too but no result, the theme doesn't use directly their component.

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import '../node_modules/bootswatch/dist/lux/bootstrap.css';
import './index.css';
import './component/header.js';
import Header from './component/header.js'

class Structure extends React.Component{
    render() {
      return (
        <div className="structure">
          <Header/>
        </div>
      );
    }
  }

  ReactDOM.render(
    <Structure/>,
    document.getElementById('root')
    );

header.js:

import React from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Login from '../page/login-page.js';
import Consultation from '../page/consultation.js';
import Consulation2 from '../page/consultation2.js';
import Consulation3 from '../page/consultation3.js';
import Consulation4 from '../page/consultation4.js';
import Logo from '../img/logo.png';

export default class Header extends React.Component{
      render(){
        return (
          <Router>
              <nav className="navbar navbar-expand-lg navbar-light bg-light" >
                <img src={Logo} className="logo" alt="Logo" />
                <a className="navbar-brand" href="#"> Marie-France Group</a>
                <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
                  <span className="navbar-toggler-icon"></span>
                </button>

                <div className="collapse navbar-collapse" id="navbarColor02">
                  <ul className="navbar-nav mr-auto">
                    <li className="nav-item active">
                      <Link className="nav-link" to="/Home">Home</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/consultation">Consultation</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/register">Register</Link>
                    </li>
                    <li className="nav-item">
                      <Link className="nav-link" to="/Login">Login</Link>
                    </li>
                  </ul>
                </div>
            </nav>

            <Route exact path="/Home" component={Home} /> 
            <Route exact path="/consultation" component={Consultation} />
            <Route path="/register" component={Register} />
            <Route exact path="/login" component={Login} />
            <Route exact path="/consultation/2" component={Consulation2} />
            <Route exact path="/consultation/3" component={Consulation3} />
            <Route exact path="/consultation/4" component={Consulation4} />
         </Router>
        );
      }
  }

  function Home() {
    return (
      <div>
        <h2>Home</h2>
      </div>
    );
  }

  function Register() {
    return (
      <div>
        <h2>Register</h2>
      </div>
    );
  }

When I click on the button to display my navigation bar in mobile, nothing is displayed. I have the same problem with a modal.

Do have I miss a step in install ? Have I to code my own components when they don't work with the theme?

Answer 1

There is no specific or separate JS file for bootswatch, so we only need to worry about getting the bootswatch theme added to our project; for the JS part, we use reactstrap

relevant JS:

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';
import { Button } from 'reactstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootswatch/dist/lux/bootstrap.css';
import { Button, Modal, ModalHeader, ModalBody, ModalFooter } from 'reactstrap';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'World to React'
    };
  }

  render() {
    var testName = 'modal for testing - click here';
    return (
      <div>

        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
        </p>
        <ModalExample buttonLabel={testName} />
      </div>
    );
  }
}

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

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

  toggle() {
    this.setState(prevState => ({
      modal: !prevState.modal
    }));
  }

  render() {
    return (
      <div>
        <Button  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>
    );
  }
}

render(<App />, document.getElementById('root'));

complete working stackblitz here

Answer 2

install bootswatch

• npm install bootswatch

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import { Navbar } from "./components/Navbar";
import { Home } from "./components/Home";
import "bootswatch/dist/litera/bootstrap.min.css"

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;