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;
Lightbox 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",
},
];
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
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.
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 ... />
|