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

        
            
        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;
            
        
        
    

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.

        
            
      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 ... />