React Bootstrap Filter

React Filter - Bootstrap 4 & Material Design

React MDBootstrap MD Bootstrap Filter plugin is an extension perfect for introducing vistors to a number of images, which can be freely filtered depending on the category. Easy to use, setup and customize.

Basic example

Show code

import React from "react";
import MDBFilter from "mdb-react-filter";

const App = () => {
  const galleryItems = [
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp",
    },
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp",
    },
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp",
    },
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp",
    },
  ];

  const gutterWidth = 15;
  const gutterHeight = 15;

  return (
    <div>
      <MDBFilter
        gutterWidth={gutterWidth}
        gutterHeight={gutterHeight}
        categories={["nature", "architecture", "food"]}
      >
        {galleryItems.map((photo) => (
          <img
            key={photo.imgSrc}
            data-filter={photo.tag}
            src={photo.imgSrc}
            alt=""
            className="animated zoomIn faster"
          />
        ))}
      </MDBFilter>
    </div>
  );
};

export default App;

Lightbox example

Show code

import React from "react";
import MDBFilter from "mdb-react-filter";

const App = () => {
  const galleryItems = [
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(30).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(1).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(42).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(2).webp",
    },
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(114).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(4).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(6).webp",
    },
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(115).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(44).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(5).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(45).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(46).webp",
    },
    {
      tag: "food",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(47).webp",
    },
    {
      tag: "nature",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(111).webp",
    },
    {
      tag: "architecture",
      imgSrc:
        "https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(3).webp",
    },
  ];

  return (
    <div>
      <MDBFilter categories={["nature", "architecture", "food"]} lightbox>
        {galleryItems.map((photo) => (
          <img
            key={photo.imgSrc}
            data-filter={photo.tag}
            src={photo.imgSrc}
            alt=""
            className="animated zoomIn faster"
          />
        ))}
      </MDBFilter>
    </div>
  );
};

export default App;

Custom components example

Show code

import React from "react";
import MDBFilter from "mdb-react-filter";

const App = () => {
  const columnWidth = 250;
  const itemHeight = 250;
  const gutterWidth = 15;
  const gutterHeight = 15;

  return (
    <div>
      <MDBFilter
        columnWidth={columnWidth}
        itemHeight={itemHeight}
        gutterWidth={gutterWidth}
        gutterHeight={gutterHeight}
        categories={["today", "tommorow"]}
      >
        <div
          className="card animated zoomIn faster bg-success"
          data-filter="tommorow"
        >
          <div className="card-body">
            <h5 className="card-title">Panel title that wraps to a new line</h5>
            <p className="card-text">
              This is a longer card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </p>
          </div>
        </div>
        <div className="card animated zoomIn faster" data-filter="today">
          <blockquote className="blockquote mb-0 card-body">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat a ante.
            </p>
            <footer className="blockquote-footer">
              <small className="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </blockquote>
        </div>
        <div className="card animated zoomIn faster" data-filter="tommorow">
          <div className="card-body">
            <h5 className="card-title">Panel title</h5>
            <p className="card-text">
              This card has supporting text below as a natural lead-in to
              additional content.
            </p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
        <div
          className="card animated zoomIn faster blue lighten-2 text-white text-center p-3"
          data-filter="today"
        >
          <blockquote className="blockquote mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat.
            </p>
            <footer className="blockquote-footer">
              <small>
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </blockquote>
        </div>
        <div
          className="card animated zoomIn faster text-center"
          data-filter="today"
        >
          <div className="card-body">
            <h5 className="card-title">Panel title</h5>
            <p className="card-text">
              This card has a regular title and short paragraphy of text below
              it.
            </p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
        <div className="card  animated zoomIn faster" data-filter="today">
          <div className="card-body">
            <h5 className="card-title">Panel title that wraps to a new line</h5>
            <p className="card-text">
              This is a longer card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </p>
          </div>
        </div>
        <div
          className="card  animated zoomIn faster text-right bg-secondary"
          data-filter="tommorow"
        >
          <blockquote className="blockquote mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat a ante.
            </p>
            <footer className="blockquote-footer">
              <small className="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </blockquote>
        </div>
        <div
          className="card animated zoomIn faster text-center"
          data-filter="tommorow"
        >
          <div className="card-body">
            <h5 className="card-title">Panel title</h5>
            <p className="card-text">
              This card has a regular title and short paragraphy of text below
              it.
            </p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
        <div className="card animated zoomIn faster" data-filter="today">
          <div className="card-body">
            <h5 className="card-title">Panel title that wraps to a new line</h5>
            <p className="card-text">
              This is a longer card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </p>
          </div>
        </div>
        <div
          className="card animated zoomIn faster text-white bg-primary"
          data-filter="today"
        >
          <blockquote className="blockquote mb-0 card-body">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat a ante.
            </p>
            <footer className="blockquote-footer">
              <small className="text-muted">
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </blockquote>
        </div>
        <div className="card animated zoomIn faster" data-filter="tommorow">
          <div className="card-body">
            <h5 className="card-title">Panel title</h5>
            <p className="card-text">
              This card has supporting text below as a natural lead-in to
              additional content.
            </p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
        <div
          className="card animated zoomIn faster blue lighten-2 text-white text-center p-3"
          data-filter="today"
        >
          <blockquote className="blockquote mb-0">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer
              posuere erat.
            </p>
            <footer className="blockquote-footer">
              <small>
                Someone famous in <cite title="Source Title">Source Title</cite>
              </small>
            </footer>
          </blockquote>
        </div>
        <div
          className="card animated zoomIn faster text-center"
          data-filter="today"
        >
          <div className="card-body">
            <h5 className="card-title">Panel title</h5>
            <p className="card-text">
              This card has a regular title and short paragraphy of text below
              it.
            </p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
        <div className="card animated zoomIn faster" data-filter="today">
          <div className="card-body">
            <h5 className="card-title">Panel title that wraps to a new line</h5>
            <p className="card-text">
              This is a longer card with supporting text below as a natural
              lead-in to additional content. This content is a little bit
              longer.
            </p>
          </div>
        </div>
        <div
          className="card animated zoomIn faster text-white bg-primary"
          data-filter="tommorow"
        >
          <div className="card-body text-white">
            <h5 className="card-title">Panel title</h5>
            <p className="card-text">
              This is another card with title and supporting text below. This
              card has some additional content to make it slightly taller
              overall.
            </p>
            <p className="card-text">
              <small>Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
        <div
          className="card animated zoomIn faster text-center bg-warning"
          data-filter="tommorow"
        >
          <div className="card-body">
            <h5 className="card-title">Panel title</h5>
            <p className="card-text">
              This card has a regular title and short paragraphy of text below
              it.
            </p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
      </MDBFilter>
    </div>
  );
};

export default App;

Filter - getting started : download & setup

Download

This plugin requires a purchase.
Buy filter plugin

React Filter - API

In this section you will find advanced information about the MDBFilter component.

MDBFilter import statement

In order to use MDBFilter component make sure you have imported proper module first.

Show code

javascript
Dependencies

import MDBFilter from 'mdb-react-filter';

"mdbreact": "^4.15.0",
"react-router-dom": "^5.0.1"

API Reference: Filter Properties

The table below shows the configuration options of the MDBFilter component.

Name	Type	Default	Description	Example
`categories`	Array(String)		Sets categoris of the images	`<MDBFilter categories=["Nature", "Architecture",...] ... />`
`columnWidth`	Number	200	Sets width of the columns	`<MDBFilter columnWidth={200} ... />`
`columns`	Number	5	Sets number of columns	`<MDBFilter columns={5} ... />`
`duration`	Number	300	Sets duration of animation	`<MDBFilter duration={300} ... />`
`easing`	String	ease-out	Sets type of animation	`<MDBFilter easing="ease-out" ... />`
`gutterWidth`	Number	15	Sets vertical gutter	`<MDBFilter gutterWidth={15} ... />`
`gutterHeight`	Number	15	Sets horizontal gutter	`<MDBFilter gutterHeight={15} ... />`
`itemHeight`	Number	150	Sets Height of the elements	`<MDBFilter itemHeight={150} ... />`
`lightbox`	Boolean	False	Enables click on the image to open it	`<MDBFilter lightbox ... />`
`responsive`	Boolean	True	Makes gallery responsive	`<MDBFilter responsive ... />`