mdbootstrap / mdb-react-ui-kit Goto Github PK

Hello,

When i try to import Button and Collapse, i get:

Import:
import { Button, Collapse } from 'mdbreact';

Error:
Module not found: Can't resolve 'mdbreact' in 'C:\wamp64\www\bob-web\notice-cmi\src\components\Collapsable'

I installed it with npm. Did i miss something ?

I'm trying to use mdbreact in a existig project with NextJs. This is the code:

import React from 'react';
import { Col, Container, Row, Footer } from 'mdbreact';

class FooterPage extends React.Component {
    render(){
        return(
            <Footer color="stylish-color-dark" className="font-small pt-4 mt-4">
                <Container className="text-center text-md-left">
                    <Row className="text-center text-md-left mt-3 pb-3">
                        <Col md="3" lg="3" xl="3" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Company name</h6>
                            <p>Here you can use rows and columns here to organize your footer content. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="2" lg="2" xl="2" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Products</h6>
                            <p><a href="#!">MDBootstrap</a></p>
                            <p><a href="#!">MDWordPress</a></p>
                            <p><a href="#!">BrandFlow</a></p>
                            <p><a href="#!">Bootstrap Angular</a></p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="3" lg="2" xl="2" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Useful links</h6>
                            <p><a href="#!">Your Account</a></p>
                            <p><a href="#!">Become an Affiliate</a></p>
                            <p><a href="#!">Shipping Rates</a></p>
                            <p><a href="#!">Help</a></p>
                        </Col>
                        <hr className="w-100 clearfix d-md-none"/>
                        <Col md="4" lg="3" xl="3" className="mx-auto mt-3">
                            <h6 className="text-uppercase mb-4 font-weight-bold">Contact</h6>
                            <p><i className="fa fa-home mr-3"></i> New York, NY 10012, US</p>
                            <p><i className="fa fa-envelope mr-3"></i> [email protected]</p>
                            <p><i className="fa fa-phone mr-3"></i> + 01 234 567 88</p>
                            <p><i className="fa fa-print mr-3"></i> + 01 234 567 89</p>
                        </Col>
                    </Row>
                    <hr/>
                    <Row className="d-flex align-items-center">
                        <Col md="8" lg="8">
                            <p className="text-center text-md-left grey-text">&copy; {(new Date().getFullYear())} Copyright: <a href="https://www.MDBootstrap.com"> MDBootstrap.com </a></p>
                        </Col>
                        <Col md="4" lg="4" className="ml-lg-0">
                            <div className="text-center text-md-right">
                                <ul className="list-unstyled list-inline">
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-facebook"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-twitter"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-google-plus"></i></a></li>
                                    <li className="list-inline-item"><a className="btn-floating btn-sm rgba-white-slight mx-1"><i className="fa fa-linkedin"></i></a></li>
                                </ul>
                            </div>
                        </Col>
                    </Row>
                </Container>
            </Footer>
        );
    }
}
        
export default FooterPage;

And this is the error that is showing:

window is not defined
ReferenceError: window is not defined
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:23:1
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:12:1
    at module.exports (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/node_modules/style-loader/lib/addStyles.js:57:1)
    at Object.<anonymous> (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Waves.css?f181:12:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Waves.js:5:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/components/Button.js:4:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/src/index.js:4:1)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at Object.defineProperty.value (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/mdbreact.js:4868:18)
    at __webpack_require__ (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:19:1)
    at module.exports (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/bootstrap b750ed3bfde4c77106d6:62:1)
    at /home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/mdbreact.js:76:10
    at webpackUniversalModuleDefinition (/home/erebror/Projects/cubiculum/react_cubiculum/node_modules/mdbreact/dist/webpack:/webpack/universalModuleDefinition

I've installed from 2 wayes:

• npm i --save mdbreact
• in package.json : "mdbreact": "git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade"

I will have made a mistake? Nobody uses yet mdbreact with NextJs?
I think something happends in server side rendering. I'm not sure.

Thanks

When I build & run the "Basic Table" example locally page and search actions
cause the column widths to resize. This does ot happen on the same
example on the demo website.

https://mdbootstrap.com/react/content/datatables/

The website example has table headers with all sorts off
attributes assigned, eg:

<th class="th-sm sorting_asc" 
	tabindex="0" 
	aria-controls="dtBasicExample" 
	rowspan="1" 
	colspan="1" 
	aria-sort="ascending" 
	aria-label="Name : activate to sort column descending" 
	style="width: 132px;">

How are these these attributes assigned?

If I hack DataTableHead.js and include the style attribute the columns no longer resize:

            columns.map(col => {
                const style = {};
                if (col.width) style['width'] = `${col.width}px`;
                return (
                  <th
                    onClick={() => sortable && handleSort(col.field, col.sort)}
                    key={col.field}
                    className={col.hasOwnProperty('minimal') ? `th-${col.minimal}` : ''}
                    style={style}
                  >
                    {col.label}
                    {sortable && <i className="fa fa-sort float-right" aria-hidden="true"></i>}
                  </th>
                )
              }
            )

I think the second time an item was imported one of elements mdb/

Hello,

The element does not allow to set a custom element. It must be a basic HTML element and you can just specify the body text. It would be a good idea to update to allow the usage of custom element.

Justin,

If I pass an onClick attribute to the Button component as a prop, then there will be 2 onClick attributes on the button element(line 80 and line 83 of Button.js)

Your documentation on installing this package to work with React ( link ) is not appropriate, lacks some info. In the doc, it is said to just install the package and start using it whereas , you need to import the following:

import 'bootstrap/dist/css/bootstrap.css'
import 'mdbreact/dist/css/mdb.css'

You guys should correct this. Also, the installation guide for setting this package with create-react-app is inappropriate; it never works for me. You guys probably want to take a look at the whole installation guide you provided for react as everything looks vague. I had to download the package, check the whole project to get brief understanding of how things work together before I actually made headway on using it. Good job done but please, let the user be pleased by giving them good doc.

When the browser is made smaller and the nav bar responds, the hamburger menu does not work (tested in chrome)

How do I configure this for deployment to heroku? I tried a bunch of the methods listed elsewhere online (adding the static.json, etc) but I'm still getting a 404 error. Help is greatly appreciated!

Line 154 of _variables.scss: after the $image-path variable the "!default" is missing, so its not possible to override the value ($image-path: "../img/";)

Line 81 of _masks.scss: image-path is hardcoded
background: url("../img/overlays/#{$filename}.png");

I have tried to implement the Sidebar with navigation to use bootstrap and material design.

I have just copy pasted the code from the example from: https://mdbootstrap.com/docs/react/navigation/sidenav/

  import React from 'react';
  import { MDBIcon, MDBSideNavCat, MDBSideNavNav, MDBSideNav, 
     MDBSideNavLink, MDBContainer, MDBRow, MDBBtn } from 'mdbreact';

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

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

   state = {
      isOpen: false
   };

   handleToggle() {
      this.setState({ isOpen: !this.state.isOpen });
   }

  render() {

  return (
   <MDBContainer>
   <MDBRow>
   <MDBBtn onClick={this.handleToggle}><MDBIcon icon="bars" size="5x" /></MDBBtn>
   </MDBRow>
   <MDBSideNav
       logo="https://mdbootstrap.com/img/logo/mdb-transparent.png"
       hidden
       triggerOpening={this.state.isOpen}
       breakWidth={1300}
       className="deep-purple darken-4"
     >
      <li>
        <ul className="social">
      <li>
        <a href="#!">
          <MDBIcon icon="facebook" />
        </a>
      </li>
      <li>
        <a href="#!">
          <MDBIcon icon="pinterest" />
        </a>
      </li>
      <li>
        <a href="#!">
          <MDBIcon icon="google-plus" />
        </a>
      </li>
      <li>
        <a href="#!">
          <MDBIcon icon="twitter" />
        </a>
      </li>
    </ul>
    </li>
    <MDBSideNavNav>
    <MDBSideNavCat
      name="Submit blog"
      id="submit-blog"
      icon="chevron-right"
    >
      <MDBSideNavLink>Submit listing</MDBSideNavLink>
      <MDBSideNavLink>Registration form</MDBSideNavLink>
    </MDBSideNavCat>
    <MDBSideNavCat
      name="Instruction"
      id="instruction"
      icon="hand-pointer-o"
      href="#"
    >
      <MDBSideNavLink>For bloggers</MDBSideNavLink>
      <MDBSideNavLink>For authors</MDBSideNavLink>
      </MDBSideNavCat>
      <MDBSideNavCat name="About" id="about" icon="eye">
      <MDBSideNavLink>Instruction</MDBSideNavLink>
      <MDBSideNavLink>Monthly meetings</MDBSideNavLink>
      </MDBSideNavCat>
      <MDBSideNavCat name="Contact me" id="contact-me" icon="envelope-o">
      <MDBSideNavLink>FAQ</MDBSideNavLink>
      <MDBSideNavLink>Write a message</MDBSideNavLink>
      </MDBSideNavCat>
      </MDBSideNavNav>
      </MDBSideNav>
      </MDBContainer>
   );
   }
   }

   export default SideNav;

I'm getting a long error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Expected behavior

I expected the navigation bar with links to show

Actual behavior

Only the form shows

Your working environment and MDB version information

React 16, and the github version of MDB

Resources (screenshots, code snippets etc.)

import React, { Component } from 'react';
import { Navbar, NavbarBrand, NavbarNav, NavbarToggler, Collapse, NavItem, NavLink, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'mdbreact';
import { BrowserRouter as Router } from 'react-router-dom';

class NavigationBar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      collapse: false,
      isWideEnough: false,
      dropdownOpen: false
    };
  this.onClick = this.onClick.bind(this);
  this.toggle = this.toggle.bind(this);
  }
  
  onClick(){
    this.setState({
        collapse: !this.state.collapse,
    });
  }
  
  toggle() {
    this.setState({
        dropdownOpen: !this.state.dropdownOpen
    });
  }
    
    render() {
      return (
        <Router>
          <Navbar color="indigo" dark expand="md" scrolling>
            <NavbarBrand href="/">
              <strong>Navbar</strong>
            </NavbarBrand>
            { !this.state.isWideEnough && <NavbarToggler onClick = { this.onClick } />}
            <Collapse isOpen = { this.state.collapse } navbar>
              <NavbarNav className="ml-auto">
                <NavItem>
                    <NavLink className="nav-link" to="#">Home</NavLink>
                </NavItem>
                <NavItem>
                    <NavLink className="nav-link" to="#">Features</NavLink>
                </NavItem>
                <NavItem>
                  <NavLink className="nav-link" to="#">Pricing</NavLink>
                </NavItem>
                  <form className="form-inline">
                    <input className="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"/>
                  </form>
              </NavbarNav>
            </Collapse>
          </Navbar>
        </Router>
      );
    }
}

export default NavigationBar

It's not a bug, but a missing documentation :

you should add the fontawesome's version who are used on mdbootstrap react. This is the 4.7 version who are used and this is not write in the website

its mentioned that version 4.1.0 is updated for React 16. but its package.json have dependency : "react": "^15.6.1",
"react-dom": "^15.6.1",

which cause multiple node_module installation dependency error:

invariant.js:42 Uncaught Error: Element ref was specified as a string (ripple) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).
at invariant (invariant.js:42)
at coerceRef (react-dom.development.js:6736)
at reconcileSingleElement (react-dom.development.js:7532)
at reconcileChildFibers (react-dom.development.js:7635)
at reconcileChildrenAtExpirationTime (react-dom.development.js:7756)
at reconcileChildren (react-dom.development.js:7747)
at finishClassComponent (react-dom.development.js:7881)
at updateClassComponent (react-dom.development.js:7850)
at beginWork (react-dom.development.js:8225)
at performUnitOfWork (react-dom.development.js:10224)

Or how get access to the html input element

Expected behavior

Actual behavior

Your working environment and MDB version information

Resources (screenshots, code snippets etc.)

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

Hi,

I tried to implement hovering effects but am not getting it. I dont know what piece am missing. is the problem with my end?

import { View, Mask } from 'mdbreact';

    render() {
        return (
                       <div>
                        <div className="row">
                            <div className="col">
                                <h2>My Templates</h2>
                            </div>
                            <div className="col">
                                <Button className="action_button float-right" type="primary">Create Templates</Button>
                            </div>
                        </div>
                            <View overlay="red-strong">
                                <img src="https://mdbootstrap.com/img/Photos/Others/forest-sm.jpg" className="img-fluid" alt="" />
                                <Mask className="flex-center">
                                    <p className="white-text">Strong overlay</p>
                                </Mask>
                            </View>
</div>
);}

My output is:

Expected behavior

react-scripts should be a devDependency

Actual behavior

react-scripts is a dependency. This dramatically increases node_modules size when including mdbreact in a node project.

Your working environment and MDB version information

Resources (screenshots, code snippets etc.)

Size with react-scripts:

Size without react-scripts:

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

When i click the dropdown toggle there's an issue with unsafe legacy lifecycles
working on react 16, react-router 4, MDB React: 4.4.0

Warning: Unsafe legacy lifecycles will not be called for components using new component APIs.

ButtonBase uses getDerivedStateFromProps() but also contains the following legacy lifecycles:
  componentWillReceiveProps

The above lifecycles should be removed. Learn more about this warning here

Can we expect MDBR to get styled components so it can be used in last gen apps ?

hey folks, so i downloaded the project from the site and ran
npm install & npm start and the server starts up but stops at the err message above

Mac OS Sierra
Node v8.9.1
NPM V5.5.1

Any help would be great, can't wait till the PRO version gets released

Expected behavior

Pills should be rendered within the container defined.

Actual behavior

Console is showing an error:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Your working environment and MDB version information

Platform: Windows
Node: v9.0.0
React: v16.3.2
MDB: 4.4.0

Resources (screenshots, code snippets etc.)

Error is happening specifically at TabContent and TabPane elements

<TabContent activeItem={this.state.activeItemPills}>
    <TabPane tabId="1">
            <LoginForm />
    </TabPane>
    <TabPane tabId="2">
        <SignUpForm />
    </TabPane>
</TabContent>

Also a bonus note: I suspect pills are a premium feature, and if this is so, then please tag appropriately in your documentation (https://mdbootstrap.com/react/advanced/tabs/#pills), too bad you guys didn't even implement a basic version of tabs for us free users.

I'm using 4.3.0 of mdbreact

I would like to clear the input value using state but not work.

Here is my code

this.setState({
   	heading: ""
});

<Input
    containerClass="col-12 input nopadding"
    hint="Heading"
    maxLength="20"
    value={this.state.heading}
    onChange={(value) => this.setState({heading: value.target.value})}
/>

It's work fine if I use HTML code, maybe componentWillReceiveProps problem?

<div class="md-form col-12 input nopadding">
    <input maxlength="20" type="text" class="form-control" placeholder="Heading"
        maxLength="20"
        value={this.state.heading}
        onChange={(value) => this.setState({heading: value.target.value})}/>
</div>

Expected behavior

We should be able to build and run a server side rendered application.

Actual behavior

When running SSR application, we got this error :

ReferenceError: window is not defined
    at Object.../node_modules/mdbreact/dist/mdbreact.js

Your working environment and MDB version information

Webpack: 4.24.0
react: 16.6.0
mdbreact: 4.8.2
Typescript: 3.1.6
Debian 4.9.110-3+deb9u6 (2018-10-08) x86_64 GNU/Linux

Resources (screenshots, code snippets etc.)

!function(e,t){ true?module.exports=t(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"),__webpack_require__(/*! react */ "../node_modules/react/index.js"),__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"),__webpack_require__(/*! react-popper */ "../node_modules/react-popper/lib/react-popper.js"),__webpack_require__(/*! react-dom */ "../node_modules/react-dom/index.js"),__webpack_require__(/*! react-transition-group */ "../node_modules/react-transition-group/index.js"),__webpack_require__(/*! react-toastify */ "../node_modules/react-toastify/lib/index.js"),__webpack_require__(/*! react-router-dom */ "../node_modules/react-router-dom/es/index.js"),__webpack_require__(/*! react-numeric-input */ "../node_modules/react-numeric-input/index.js"),__webpack_require__(/*! outy */ "../node_modules/outy/index.js")):undefined}(window,function(e,t,n,r,o,a,i,c,l,u){return function(e){var t={};functio

ReferenceError: window is not defined
    at Object.../node_modules/mdbreact/dist/mdbreact.js (/home/epi/Prog/boilerplates/react-ssr/dist/server/app.bundle.js:26136:881)
    at __webpack_require__ (/home/epi/Prog/boilerplates/react-ssr/dist/server/app.bundle.js:20:30)
    at Module../components/sample/SampleButtons.tsx (/home/epi/Prog/boilerplates/react-ssr/dist/server/app.bundle.js:78991:66)

I was able to get the application running with webpack-dev-server OR with SSR.
After I added mdboostrap, I was only able to get the application running with webpack-dev-server, the SSR is broken because that window.

I probably found the problem : you are packaging the application with "style-loader" which is not compatible with SSR. I have done some tests by rebuilding bootstrap-material-design differently :

1. using the mini-css-extract-plugin, as a consequence we need to import a new generated css file
2. using isomorphic-style-loader instead of style-loader

Both solution works. As the first one have the drawback to add another CSS import (5k extracted from the JS) I finaly choose the second one.

PR : #53
Please check I didn't beack anything, it works on my project but I am just discovering your library and only verified Buttons :D

I will close the previous issue that I created in the wrong repository (https://github.com/mdbootstrap/bootstrap-material-design/issues/196)

`
Failed to compile.

./src/App.js
Module not found: Can't resolve 'mdbreact' in '/home/mypersonal/reactjs/src'
`

Getting below error while running the project. Can somebody please check this issue asap.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] start: yarn run webpack
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Rasika kshirsagar\AppData\Roaming\npm-cache_logs\2018-11-27T12_38_40_871Z-debug.log

run the command to build the react app for production, npm run-script build, the build folder is created and on serve -s build, the IP should render the page.

The IP generated shows blank page

Mac book pro, Bootstrap 4.0.0

I am using React and React DOM versions 15.4.2.

When I try to import components like this:

import React, { Component, PropTypes } from 'react';
import { Button, Modal, ModalBody, ModalHeader, ModalFooter } from 'mdbreact';

PHPStorm gives me errors saying cannot resolve symbol 'Modal'

When I click on the button to show the modal I get the following error in the console:

I am using "mdbreact": "^4.1.0",

when i wrap Link tag from react-router-dom to a CardImage it is working fine on chrome. But when I was on firefox or mobile browser, I need to double click the image in order to make the Link working.

working on react 16, react-router 4, MDB React: 4.4.0

<Link to={`/dashboard/product/${this.props.product_id}`}>
    <CardImage
        className="img-fluid"
        src={this.props.image}
     />
</Link>

Attempt to use modal results in following:

Uncaught TypeError: Cannot read property 'parentNode' of undefined
at Modal.renderIntoSubtree (bundle.js:34254)
at Modal.show (bundle.js:34220)
at Modal.togglePortal (bundle.js:34174)
at Modal.componentDidUpdate (bundle.js:34111)
at commitLifeCycles (bundle.js:22055)
at commitAllLifeCycles (bundle.js:22207)
at HTMLUnknownElement.callCallback (bundle.js:20239)
at Object.invokeGuardedCallbackDev (bundle.js:20255)
at invokeGuardedCallback (bundle.js:20194)
at commitRoot (bundle.js:22235)

Expected behavior

When I import Spinner, it should be imported and I should see a spinner.

Actual behavior

I am getting undefined.

Your working environment and MDB version information

Using mdb from git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git
react: 16.3.1
react-dom: 16.3.1

Resources (screenshots, code snippets etc.)

import {}
For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

import { Button, ListGroup, ListGroupItem, Spinner } from "mdbreact";
.....
render(){
 return(
 <Spinner />
)
}

Expected behavior

based on react 16, less warnings

Actual behavior

npm install mdbreact

npm WARN deprecated [email protected]: please use 0.7.4 or 8.0.0 and above

[email protected] postinstall /home/salvo/Documenti/progettiLocal/test-react/node_modules/jss
node -e "console.log('\u001b[35m\u001b[1mLove JSS? You can now support us on open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/jss/donate\u001b[0m')"

Love JSS? You can now support us on open collective:

https://opencollective.com/jss/donate

[email protected] postinstall /home/salvo/Documenti/progettiLocal/test-react/node_modules/material-ui-pickers
node -e "console.log('\u001b[35m\u001b[1mHave you installed one of peer libraries?\u001b[22m\u001b[39m\n > date-fns \n > luxon \n > moment')"

Have you installed one of peer libraries?

date-fns
luxon
moment
npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

• [email protected]
  added 96 packages from 137 contributors and audited 13052 packages in 17.258s
  found 0 vulnerabilities

Your working environment and MDB version information

Ubuntu 18.04, node 10.8.0

have I to install two versions of react or remain on react 15?

npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.

Is really jquery free?

Hey,

It's impossible to use specific color who are not "primary, secondary, pink, .." in the "color" attribut like that

<Button color="#c0392b">Add</Button>

To do it I had to did it :
<Button className="red-color" color="">Add</Button>
.red-color { background-color: #c0392b }

I think it should be nice to allow this :
<Button color="#c0392b">Add</Button>

If the color is not a predefined color just add a style balise like this :
style={"background-color:"+this.color+"}

Hey,
I have just started using mdbReact and I love it. I am using react to build my projects. And i have problems using the icons and the hover effect on images. Is there any import that I have to do or something? please help me out

Expected behavior

To be able to use .jsx extension for use with emmet shortcuts.

Actual behavior

when using a .jsx extension webpack fails to compile.
when extension is changed to .js, everything compiles correctly.

Your working environment and MDB version information

MDB: 4.2.0
Node: 9.3.0
VSCode v1.22

Resources (screenshots, code snippets etc.)

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

Expected behavior

like this page: https://mdbootstrap.com/wp-content/themes/mdbootstrap4/content/jquery/tutorials/bootstrap/tutorial-2/10/index.html

Actual behavior

Your working environment and MDB version information

4.2.0

Resources (screenshots, code snippets etc.)

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

The ToastContainer component throws this error whenever I try to use it:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

I am importing it like this import { ToastContainer, toast } from "mdbreact";, and using it in my app like this:

<ToastContainer hideProgressBar={true} newestOnTop={true} autoClose={5000} />

Expected behavior

I want the card to look like the one here

Actual behavior

The card looks like a regular one.

Your working environment and MDB version information

React 16
MDB: https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade

Resources (screenshots, code snippets etc.)

This is the error I get;

Warning: Received `true` for a non-boolean attribute `wide`.

If you want to write it to the DOM, pass a string instead: wide="true" or wide={value.toString()}.
    in div (created by Card)
    in Card (at ProgramCard.jsx:7)
    in div (at ProgramCard.jsx:6)
    in ProgramCard (at Programs.jsx:14)
    in div (at Programs.jsx:11)
    in div (at Programs.jsx:10)
    in Programs (at Load.jsx:20)
    in div (at Load.jsx:15)
    in _class2 (created by Route)
    in Route (at App.jsx:14)
    in Switch (at App.jsx:11)
    in Router (created by BrowserRouter)
    in BrowserRouter (at App.jsx:10)
    in div (at App.jsx:9)
    in App (at index.js:6)
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
validateProperty$1 @ react-dom.development.js:13553
warnUnknownProperties @ react-dom.development.js:13580
validateProperties$2 @ react-dom.development.js:13600
validatePropertiesInDevelopment @ react-dom.development.js:13639
setInitialProperties$1 @ react-dom.development.js:13906
finalizeInitialChildren @ react-dom.development.js:14989
completeWork @ react-dom.development.js:8648
completeUnitOfWork @ react-dom.development.js:10132
performUnitOfWork @ react-dom.development.js:10234
workLoop @ react-dom.development.js:10288
callCallback @ react-dom.development.js:542
invokeGuardedCallbackDev @ react-dom.development.js:581
invokeGuardedCallback @ react-dom.development.js:438
renderRoot @ react-dom.development.js:10366
performWorkOnRoot @ react-dom.development.js:11014
performWork @ react-dom.development.js:10967
requestWork @ react-dom.development.js:10878
scheduleWorkImpl @ react-dom.development.js:10732
scheduleWork @ react-dom.development.js:10689
scheduleTopLevelUpdate @ react-dom.development.js:11193
updateContainer @ react-dom.development.js:11231
(anonymous) @ react-dom.development.js:15226
unbatchedUpdates @ react-dom.development.js:11102
renderSubtreeIntoContainer @ react-dom.development.js:15225
render @ react-dom.development.js:15290
./src/index.js @ index.js:6
__webpack_require__ @ bootstrap e533650376f87b7a3194:678
fn @ bootstrap e533650376f87b7a3194:88
0 @ programs.json:1
__webpack_require__ @ bootstrap e533650376f87b7a3194:678
./node_modules/ansi-regex/index.js.module.exports @ bootstrap e533650376f87b7a3194:724
(anonymous) @ bootstrap e533650376f87b7a3194:724

My code looks like this;

<Card wide>
	<CardImage className="img-fluid" src={`/events/${props.poster}`} alt={`${props.name}`} />
    <CardBody>
    	<CardTitle>{props.name}</CardTitle>
        <CardText>{props.description}</CardText>
    </CardBody>
</Card>

And somehow you managed to violate it.

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

(reference)

Not cool.

I get the following error:

./node_modules/mdbreact/src/components/TextField.js
Module parse failed: Unexpected token (101:6)
You may need an appropriate loader to handle this file type.
| icon,
| iconClass,
| ...attributes
| } = this.props;
|

hi i am new to react and found mdbootstrap is good for new development,
i download the source code and did "install npm" followed by "npm start" which builds and starts well in browser.
but when run the command "npm run build" it minified js "mdbreact.js" corresponding map file along with that some font files and one svg file and place it in "dist" directory. but i can not find any index.html with linking to minified.js and minified.css.

can anybody help me getting the config for a production env. so that it will create all necessary steps to put everything required for production version.

thank you

Context
I develop an SPA app with React 16.2.0.
I'm using the last version of mdbreact : 4.1.0
I would like to use the Navbar component.

Steps to reproduce

1. Create a test project
   npx react-create-app test-issue

2. Check if the react version is >= 16.0.0

3. In App.js, replace the content with the followings

import logo from './logo.svg';
import './App.css';
import { Navbar } from 'mdbreact'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar color="indigo" dark expand="md" fixed="top" scrolling>
          </Navbar>
      </div>
    );
  }
}

export default App;`
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { Navbar } from 'mdbreact'

class App extends Component {
  render() {
    return (
      <div className="App">
        <Navbar color="indigo" dark expand="md" fixed="top" scrolling>
          </Navbar>
      </div>
    );
  }
}

export default App;

4. Launch the app
   npm start

5. An error is display

Element ref was specified as a string (navbar) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

Problem

After some deeply research, I found the source of the trouble.
https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design/blob/65b8f6b66559ed6bbaed5eff3c485d355e724e2a/src/components/Navbar.js#L75

String is not anymore accepted for ref.
You can have a look on the official documentation of React :
https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs

According to the above informations and the changelog (cf https://github.com/facebook/react/blob/master/CHANGELOG.md), it is very much possible that the functionnalty was deleted.

Do you have time line for React 16

Hello (once again),

I think you should add in the documentation that the <Input> can had the attribut "name"

<Input name="myfieldname" icon="user" group label="Label field"/>
and the html corresponding :

<div class="md-form form-group">
    <i class="fa fa-user prefix"></i>
    <input name="myfieldname" class="form-control" value=""/>
    <label class="">Label field</label>
</div>

Expected behavior

to increase interval in react carousel

Actual behavior

it is taking default interval 5000

Your working environment and MDB version information

Material Design for Bootstrap 4 (React version)

Resources (screenshots, code snippets etc.)

Expected behavior

When adding mdbreact to my existing project, expected it to run as is

Actual behavior

I get the error

Error: Cannot find module './factoryWithThrowingShims' from '/Users/.../node_modules/mdbreact/dist'

Your working environment and MDB version information

Node : v7.3.0
NPM : 5.5.1
React : Both 15.6.1 and 16
mdbreact : both via npm install (4.2.0) and git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git

I am using Browserify and babelify to parse JS with babel-preset-env and babel-preset-react

Resources (screenshots, code snippets etc.)

> browserify index.js -t [ babelify --presets [ env react ] ] -o build/web-bundle.js

Error: Cannot find module './factoryWithThrowingShims' from '/Users/.../node_modules/mdbreact/dist'
    at /Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:55:21
    at load (/Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:69:43)
    at onex (/Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:92:31)
    at /Users/.../node_modules/browser-resolve/node_modules/resolve/lib/async.js:22:47
    at FSReqWrap.oncomplete (fs.js:111:15)

Warning: Unknown props onExited, appear, enter, exit on div tag. Remove these props from the element. For details, see https://fb.me/react-unknown-prop
in div (created by Fade)
in Fade
in div (created by TransitionGroup)
in TransitionGroup

when trying to close a modal i'm getting an error
mdbreact.js:2046 Uncaught TypeError: Cannot read property 'contains' of undefined
at Modal.handleBackdropClick

this is actually happens no matter where i click after the modal is open, clicking at the screen just invoking the error

inside my package.json

"react": "^16.2.0",
"react-dom": "^16.2.0",
"mdbreact":"git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade",

@smolenski-mikolaj :)

Cloned the repo and tried to install and run but this fails.
Not sure why peer dependencies have to be installed myself - can't these be in package.json?

Not a good experience for a first timer with React MDB, which is sad as the project looks so good.

Expected behavior

clone the repository
cd to the directory with the repository
npm install (don't use yarn)
run the app using npm start
enjoy!

Actual behavior

clone the repository
cd to the directory with the repository
npm install - failed as there are peer dependencies.

Your working environment and MDB version information

npm --version = 5.6.0
node --version = v9.10.1

Resources (screenshots, code snippets etc.)

npm WARN [email protected] requires a peer of ajv@^6.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of webpack@1 || 2 || ^2.1.0-beta || ^2.2.0-rc but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] - 3 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of [email protected] || ^15.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Expected behavior

Icons using the tag should show

Icons do not show at all on Microsoft Edge. On Firefox, al iconsl look like the attached image

Your working environment and MDB version information

My dependencies are
{
"font-awesome": "4.7.0",
"mdbreact": "git+https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design.git#react-upgrade",
"node-sass-chokidar": "^1.0.1",
"react": "^16.2.0",
"react-addons-transition-group": "^15.6.2",
"react-anime": "^2.1.0",
"react-cursor-position": "^2.4.1",
"react-dom": "^16.2.0",
"react-error-overlay": "4.0.0",
"react-helmet": "^5.2.0",
"react-scripts": "1.1.1"
}

Resources (screenshots, code snippets etc.)

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum