I'm getting 1 low and 1 high vulnerability with the updated version of reactjs which also has an issue that produce 86 vulnerability
I also had a project with the earlier version of reactjs and the both vulnerabilities is also shown even with the command npm audit fix or npm update

I don't know if this is a problem in react itself or the mdb.

Edit: MDBBtn is also not working with hooks.

With the free theme, if I change the value of $font-size-base to 1.25rm, checkboxes look a little bit offset from the text :

I can think of two solutions to this problems (but I don't know which one is preferable in the general case) :

• Either scale the checkbox with the text
• Or work on the alignment so it stays on the baseline

Possible workaround : For now, I have achieved to implement the first solution in my own project by overriding the default values to take into account the text size. Maybe those would make better default values.

$form-check-input-margin-left: $font-size-base * 1.79;
$form-check-input-radio-margin-left: $font-size-base * 1.85;
$form-check-input-width-md: $font-size-base * 1.125;
$form-check-input-border-width: $font-size-base * 0.125;
$form-check-input-before-width: $font-size-base * 0.875;

$form-check-input-checkbox-border-radius: $font-size-base * 0.125;
$form-check-input-checkbox-focus-after-width: $font-size-base * 0.875;

$form-check-input-checkbox-checked-after-border-width: $font-size-base * 0.125;
$form-check-input-checkbox-checked-after-width: $font-size-base * 0.375;
$form-check-input-checkbox-checked-after-height: $font-size-base * 0.8125;
$form-check-input-checkbox-checked-after-margin-left: $font-size-base * 0.25;

$form-check-input-indeterminate-checked-after-border-width: $font-size-base * 0.125;
$form-check-input-indeterminate-checked-after-width: $font-size-base * 0.125;
$form-check-input-indeterminate-checked-after-height: $font-size-base * 0.875;
$form-check-input-indeterminate-checked-after-margin-left: $font-size-base 0.375;

$form-check-input-radio-width: $font-size-base * 1.25;

$form-check-input-radio-before-width: $font-size-base;
$form-check-input-radio-checked-after-width: $font-size-base * 0.625;
$form-check-input-radio-checked-after-margin-top: $font-size-base * 0.1875;
$form-check-input-radio-checked-after-margin-left: $font-size-base * 0.1875;

Also, thank you for making this awesome library available for free !

Lets assume we have next button

<MDBBtn color="success" outline >
   text
</MDBBtn>

Expected behavior is that ripple will have any color except white. Perfectly - it should have success color,
You can see it yourself in docs: https://mdbootstrap.com/docs/b5/react/components/buttons/#section-outline

I really liked how these UI components look and work like and I wanted to suggest something for the boilerplate download which happens here:

By default, it was created by Create React App, but there is something called Vite which also has a scaffolding nature for React which is wayyyyy more faster than Create React App. The reason for that is using a different bundler.

I would love to contribute to this project and it'll be an honour if I helped in creating that boilerplate myself with Vite and help MDB React to use it ✌ 🎯

Env

$ npm --version
7.9.0

Steps To Reproduce:

Create the base app:

$ mkdir test-table && cd test-table
$ create-react-app --template=typescript ./
$ npm i --save mdbreact --legacy-peer-deps

Change the App.tsx to:

import './App.css';
import {MDBDataTable} from 'mdbreact';

function App() {
    return (
        <MDBDataTable
            data={{
                columns:[{
                    label: 'temp',
                    field: 'key2'
                }],
                rows: [{
                    key1: "value1",
                    key2: "value2",
                    message: "the-message"
                }]
            }}
        />
    );
}

export default App;

Start app:

$ npm start

Observed Behavior

The table displays "the-message"

Expected Behavior

The table should display "value2"

Questions:

Is there some magic field in MDBDataTable called message ? Is this just a bug that should have surfaced up by now, but somehow, hasn't ? Or am I just doing something terribly stupid here (lack of sleep and high caffeine maybe) ?

label overlap input box border border When the input box is in a Modal. sorry for my english is bad.

import React, { useState, useEffect } from "react";
import {
  MDBInput,
  MDBBtn,
  MDBModal,
  MDBModalDialog,
  MDBModalContent,
  MDBModalHeader,
  MDBModalTitle,
  MDBModalBody,
  MDBModalFooter,
} from "mdb-react-ui-kit";

export default function App() {
  const [basicModal, setBasicModal] = useState(false);

  const toggleShow = () => setBasicModal(!basicModal);
  return (
    <>
      <MDBInput label="Text input" id="typeText" type="text" />
      <br />
      <MDBBtn onClick={toggleShow}>LAUNCH DEMO MODAL</MDBBtn>
      <MDBModal
        show={basicModal}
        getOpenState={(e: any) => setBasicModal(e)}
        tabIndex="-1"
      >
        <MDBModalDialog>
          <MDBModalContent>
            <MDBModalHeader>
              <MDBModalTitle>Modal title</MDBModalTitle>
              <MDBBtn
                className="btn-close"
                color="none"
                onClick={toggleShow}
              ></MDBBtn>
            </MDBModalHeader>
            <MDBModalBody>
              <MDBInput label="Example label" id="form1" type="text" />
            </MDBModalBody>

            <MDBModalFooter>
              <MDBBtn color="secondary" onClick={toggleShow}>
                Close
              </MDBBtn>
              <MDBBtn>Save changes</MDBBtn>
            </MDBModalFooter>
          </MDBModalContent>
        </MDBModalDialog>
      </MDBModal>
    </>
  );
}

It started failing after update from 1.0.0-beta7 to 1.0.0

mdb-react-ui-kit.esm.js:95 Uncaught TypeError: p is not a function
    at eval (mdb-react-ui-kit.esm.js:95)
eval @ mdb-react-ui-kit.esm.js:95
setTimeout (async)
eval @ mdb-react-ui-kit.esm.js:95
eval @ mdb-react-ui-kit.esm.js:95
invokePassiveEffectCreate @ react-dom.development.js:23482
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23569
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23442
performSyncWorkOnRoot @ react-dom.development.js:22264
eval @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:468
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
unbatchedUpdates @ react-dom.development.js:22433
legacyRenderSubtreeIntoContainer @ react-dom.development.js:26015
render @ react-dom.development.js:26098
eval @ app.tsx:14
./resources/assets/user_account/app.tsx @ app.js:18
options.factory @ manifest.js:614
__webpack_require__ @ manifest.js:36
__webpack_exec__ @ app.js:553
(anonymous) @ app.js:554
__webpack_require__.O @ manifest.js:90
(anonymous) @ app.js:555
webpackJsonpCallback @ manifest.js:1268
(anonymous) @ app.js:9

JSX:

<MDBModal staticBackdrop show={debugModalContent !== null} tabIndex='-1'>
    <MDBModalDialog size="xl" centered>
        <MDBModalContent>
        </MDBModalContent>
    </MDBModalDialog>
</MDBModal>

It fails even like this

<MDBModal/>

carousel disappearing after showing all pictures. I need my images to be dynamic, so I use map function, but then it doesn't work

import React, { useState, useEffect } from "react";
import {
  MDBCarousel,
  MDBCarouselInner,
  MDBCarouselItem,
  MDBCarouselElement,
  MDBCarouselCaption,
} from "mdb-react-ui-kit";
import axios from "axios";

export default function Carousel() {
  const [carouselList, setCarouselList] = useState([]);
  useEffect(() => {
    axios.get(url).then((response) => setCarouselList(response.data))
  }, []);
  return (
    <MDBCarousel showIndicators showControls fade>
      <MDBCarouselInner>
        {carouselList.map((key, index) => {
          return (
            <MDBCarouselItem itemId={index}>
              <MDBCarouselElement
                className="carousel-img"
                src={key.imgSrc}
                alt={key.imgAlt}
              />
                <MDBCarouselCaption>
                  <h5>slide label</h5>
                  <p>slide {index}</p>
              </MDBCarouselItem>
            </MDBCarouselItem>
          )
        })}
      </MDBCarouselInner>
    </MDBCarousel>
  )
}

Wondering what's the relationship is with the other project https://github.com/mdbootstrap/React-Bootstrap-with-Material-Design ??

It's not visible this one uses that one. It has very little stars.

When trying to find the mdbreact repository, I get redirected to this repo, so the questions are:

1. Is this a new version of mdbreact (if yes, then why not keeping up with semantic versioning?)
2. If it is a successor of mdbreact are there any breaking changes? What is the migration guide?
3. What happens with the old mdbreact library?

It seems that we are lacking some clear communication about what happened and this might confuse a lot of developers that use this library.

Getting this warning when navigate link using <MDBNavLink />

1. Carousel with 1 slide magically slides to 2nd non-existing slide and then never slides again showing black screen
2. Carousel should have an option to disable autosliding at all - there are lots of stuations when autosliding is not needed (for example simple image gallery for shop item)
3. Carosuel prev and next buttons use font awesome. If font awesome is not used in project - icons are not shown. Maybe 2 props like 'nextIcon' and prevIcon can be added to allow customization.
4. In documentation interval is placed on <MDBCarousel showControls interval={10000}> while in reality interval prop should be placed on each <MDBCarouselItem interval={10000}>. I've verified the code of MDBCarousel and there are no interval prop or its usage there.
5. MDBCarouselItem should use MDBCarousel's interval unless it has its own interval.