{"id":16194,"date":"2021-01-20T09:13:03","date_gmt":"2021-01-20T09:13:03","guid":{"rendered":"https:\/\/www.bacancytechnology.com\/blog\/?p=16194"},"modified":"2024-06-06T04:45:03","modified_gmt":"2024-06-06T04:45:03","slug":"developing-responsive-and-common-react-filter-component","status":"publish","type":"post","link":"https:\/\/www.bacancytechnology.com\/blog\/developing-responsive-and-common-react-filter-component","title":{"rendered":"A Comprehensive Guide on Developing Responsive and Common React Filter Component"},"content":{"rendered":"<p>Your end-users always expect the UI to be more consistent, comfortable, and attractive in web and mobile applications. With that consideration, the product should be developed, keeping the user interface\u2019s consistency in their minds. This task can be challenging when there\u2019s a need for a responsive website for different screen widths and layouts. So, I have come up with this blog that will help you build a Responsive React Filter Component. Without much ado, let\u2019s start coding.<\/p>\n<style>\nul.index-list {\n    text-align: left;\n    list-style-type: square;\n}\np{\n   width:100%;\n}\n.post-content p img {\n    margin-bottom: 0 !important;\n}\n.border-div{border: 1px solid #000; padding: 22px; text-align: center; margin-bottom: 32px;}\n\t\t.border-bottom{\n\t\t\tborder-bottom: 1px solid #000;\n\t\t\ttext-align: center;\n\t\t\tdisplay: inline-block;\n\t\t}\n\t\t.border-div p{text-align: left;}\n\t\t.cust-list{padding: 0; text-align: left;}\n\t\t.cust-list li{padding-left: 32px; list-style: none}\n<\/style>\n<div class=\"border-div\">\n<h2 class=\"border-bottom\">Table of Index<\/h2>\n<p><a href=\"#1\"><strong>1. User Interface for Responsive React Filter Component<\/strong> <\/a><\/p>\n<p><a href=\"#2\"><strong>2. Steps for building React Filter Component:<\/strong><\/a><\/p>\n<ul class=\"index-list\" style=\"\n    list-style-type: decimal;\"><\/p>\n<li>Building a Button controlling React  Filter Component<\/li>\n<li>Design of the Button using CSS<\/li>\n<li>Use of Ref and useEffect <\/li>\n<li>Implementing Modal for Mobile Devices using Reach UI<\/li>\n<li>Putting all the pieces together<\/li>\n<\/ul>\n<p><a href\"4#\"><strong>3. Conclusion<\/strong><\/div>\n<p><\/a><\/p>\n<h2 id=\"1\">User Interface for Responsive React Filter Component<\/h2>\n<p>Before discussing how to build a responsive React Filter Component, let\u2019s see the UI and its use case. So, here is the mockup of the component that we are going to build. The main idea of it is &#8211; on clicking the button named JS Frameworks, a dropdown will be displayed for web applications, and for mobile applications, it will cover the entire screen. I hope you have understood the UI, structure, and need. <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image3-11.png\" alt=\"Responsive React Filter Component\" width=\"1100\" height=\"585\" class=\"aligncenter size-full wp-image-16195\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image3-11.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image3-11-300x160.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image3-11-1024x545.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image3-11-768x408.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h2 id=\"2\">Steps for building React Filter Component<\/h2>\n<p>As we discussed earlier, we wanted to build a component that satisfies various screen widths. Thus, I would create one common component for this filter, which would decide which component should be displayed depending on different screen widths. But, before that, we need to do a lot more code. For simplifying it, I have divided it into five parts, maintaining the flow to code at ease.<\/p>\n<p class=\"boxed bg--secondary\" style=\"border: 1px solid #c7c7c7; box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);\"><strong><i><span style=\"font-size:22px; color:#000;\">Looking for assistance that built React Filter Component in your app?<\/span><br \/>\nYou click away. Connect with the best <a href=\"https:\/\/www.bacancytechnology.com\/reactjs-development\" target=\"_blank\" rel=\"noopener\">ReactJS Development company<\/a> for building  React Filter Components with visually appealing apps.<\/i><\/strong><\/p>\n<p><strong>Building a Button controlling React  Filter Component<\/strong><\/p>\n<p>In the first step, I will implement a Button having the state value for opening and closing the filter. I have also given a basic styling to the button to make it look good; you can change the design at your convenience. <\/p>\n<p><strong>\/\/ FilterComponent.js<\/strong><\/p>\n<pre>\r\nimport React, { useState } from 'react';\r\nimport '.\/FilterComponent.css';\r\n\u200d\r\nfunction FilterComponent() {\r\n \/\/ Declaring a new state variable named \"isOpen\"\r\n const [isOpen, setIsOpen] = useState(false);\r\n \r\n return (\r\n   < div className=\"filter_wrapper\" >\r\n     < button\r\n       onClick={() => setIsOpen(!isOpen)}\r\n       className=\"filter_button\"\r\n     >\r\n       JS Frameworks\r\n     < \/button >\r\n   < \/div >\r\n );\r\n}\r\n<\/pre>\n<p><strong>Design of the Button using CSS<\/strong><\/p>\n<p><strong>\/\/ FilterComponent.css<\/strong><\/p>\n<pre>\r\n.filter_wrapper {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n.filter_button {\r\n border-radius: 5px;\r\n padding: 8px 16px;\r\n background-color: #408aeb;\r\n cursor: pointer;\r\n font-weight: 500;\r\n color: white;\r\n font-size: 18px;\r\n line-height: 1.5;\r\n}\r\n.filter_button:hover {\r\n background-color: #092b58;\r\n}\r\n.filter_button:focus {\r\n outline: 1px dashed;\r\n outline: 1px auto -webkit-focus-ring-color;\r\n}\r\n<\/pre>\n<p><strong>Use of Ref and useEffect <\/strong><\/p>\n<p>So far, we have made our React Filter component and styled it with a basic design. One more thing to be done is whenever users click outside an opened dropdown; they would expect the dropdown to be closed. For that, I will use the Ref and useEffect.<\/p>\n<pre>\r\nuseEffect(() => {\r\n   const handleClick = event => {\r\n     const isDropdownClicked =\r\n       dropdownRef.current && dropdownRef.current.contains(event.target);\r\n     const isButtonClicked =\r\n       buttonRef.current && buttonRef.current.contains(event.target);\r\n \r\n     \r\nif (isDropdownClicked || isButtonClicked) {\r\n       \/\/ We would do nothing if the ref is undefined or the user clicks on the menu.\r\n       return;\r\n     }\r\n     \/\/ Or else close the menu.\r\n     setIsOpen(false);\r\n   };\r\n    \r\n     document.addEventListener(\"mousedown\", handleClick); \r\n     document.addEventListener(\"touchstart\", handleClick); \r\n \r\n   \/\/ cleanup\r\n   return () => {\r\n     document.removeEventListener(\"mousedown\", handleClick);  \r\n     document.removeEventListener(\"touchstart\", handleClick);   \r\n   };\r\n }, [dropdownRef, buttonRef]);\r\n<\/pre>\n<p><strong>Tip &#8211;<\/strong> You can use a custom user hook, useClickOutside, and write your logic of useEffect there to avoid cluttering in your component.<\/p>\n<p>Let\u2019s have a glance at our component. So far, so good! <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image1-21.png\" alt=\"Building responsive filter component\" width=\"1100\" height=\"457\" class=\"aligncenter size-full wp-image-16197\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image1-21.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image1-21-300x125.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image1-21-1024x425.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image1-21-768x319.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>Now further, we need to implement this for mobile devices. <\/p>\n<p><strong>Implementing the Modal for Mobile Devices using Reach UI<\/strong><\/p>\n<p>The concept of modal might simple- to cover the entire screen with the title at the top. But, when it comes to implement and start coding, believe me, it can be challenging. We would be using <a href=\"https:\/\/reach.tech\/\" target=\"_blank\" rel=\"noopener\" class=\"broken_link\">Reach UI<\/a> for managing focus states, semantics, and other difficulties related to the modal components. You can prefer any library which has a Modal component; it\u2019s totally up to your choice. Since I\u2019m familiar with Reach UI, I would go with that.<\/p>\n<p>I\u2019ll create a component &#8211; FilterModalComponent, that would contain my Modal. And later, I\u2019ll import this into my FilterComponent.<\/p>\n<p><strong>\/\/ FilterModalComponent.js<\/strong><\/p>\n<pre>\r\nimport React from \"react\";\r\nimport { DialogOverlay } from \"@reach\/dialog\";\r\n\u200dimport \".\/FilterModalComponent.css\";\r\n \r\nconst FilterModalComponent = React.forwardRef(\u200d\r\n ({ children, onSelect, onCancel }, ref) => {\r\n   return (\r\n    < div className=\"modal_wrapper\" >\r\n     < DialogOverlay\r\n       ref={ref}\r\n       className=\"modal_container\"\r\n       aria-label=\"modal window\"\r\n     >\r\n       < div className=\"modal_header\" >\r\n         < button onClick={() => onCancel()} >x< \/button >\r\n       < \/div >\r\n       < div className=\"modal_content\" >{children}< \/div >\r\n       < div className=\"modal_actions\" >\r\n         < button onClick={() => onSelect()} >Select< \/button >\r\n       < \/div >\r\n     < \/DialogOverlay >\r\n    < \/div >\r\n   );\r\n });\r\nexport default FilterModal;\r\n<\/pre>\n<p>And the CSS file of FilterModal is here &#8211; <\/p>\n<p><strong>\/\/ FilterModalComponent.css<\/strong><\/p>\n<pre>\r\n.modal_wrapper {\r\n display: block;\r\n background-color: transparent;\r\n}\r\n \r\n \r\n@media (min-width: 768px) {\r\n .modal_wrapper {\r\n   display: none;\r\n }\r\n}\r\n \r\n.modal_container {\r\n z-index: 60;\r\n display: flex;\r\n background-color: white;\r\n right: 0;\r\n flex-direction: column;\r\n position: fixed;\r\n top: 5px;\r\n}\r\n \r\n.modal_header {\r\n padding: 20px 12px;\r\n border-bottom-color: #e4e6eb;\r\n display: flex;\r\n border-bottom-width: 10px;\r\n}\r\n \r\n.modal_content {\r\n display: flex;\r\n}\r\n \r\n.modal_actions {\r\n display: flex;\r\n align-items: center;\r\n border-top-width: 3px;\r\n justify-content: flex-end;\r\n margin-top: 5px;\r\n border-top-color: #e4e7eb;\r\n padding: 8px;\r\n}\r\n \r\n.modal_actions button {\r\n font-weight: 500;\r\n border-radius: 2px;\r\n padding: 5px 8px;\r\n cursor: pointer;\r\n background-color: #2b7de9;\r\n width: auto;\r\n color: white;\r\n}\r\n<\/pre>\n<p>Our Filter Modal component is ready, which will only appear for small screens because of this &#8211; <\/p>\n<pre>\r\n@media (min-width: 768px) {\r\n .modal_wrapper {\r\n   display: none;\r\n }\r\n}\r\n<\/pre>\n<p>This is how our component will look like.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image2-13.png\" alt=\"our component \" width=\"1100\" height=\"708\" class=\"aligncenter size-full wp-image-16198\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image2-13.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image2-13-300x193.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image2-13-1024x659.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image2-13-768x494.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>Now, it\u2019s time to import this FilterModalComponent into the FilterComponent. Keep in mind that modal expects Ref to prevent it from closing unexpectedly, and other props like &#8211; onSelect and onCancel, for controlling the user\u2019s actions.<\/p>\n<pre>\r\nimport React, { useState, useRef, useEffect } from \"react\";\r\nimport \".\/FilterComponent.css\";\r\n\u200dimport FilterModalComponent from \".\/FilterModalComponent\";\r\n \r\nexport default function FilterComponent() {\r\n const [isOpen, setIsOpen] = useState(false);\r\n const dropdownRef = useRef(undefined);\r\n const buttonRef = useRef(undefined);\r\n const modalRef = useRef(undefined);\r\n \r\nuseEffect(() => {\r\n const handleClick = event => {\r\n \r\nconst isDropdownClicked = dropdownRef.current && dropdownRef.current.contains(event.target);\r\n const isButtonClicked = buttonRef.current && buttonRef.current.contains(event.target);\r\n const isModalClicked = modalRef.current && modalRef.current.contains(event.target);\r\n \r\n if (isDropdownClicked || isButtonClicked || isModalClicked) {\r\n  \/\/ We would do nothing if the ref is undefined or user clicks on menu.\r\n   return;\r\n }\r\n \r\n \/\/ Or else close the menu.  \r\n setIsOpen(false);\r\n };\r\n \r\n document.addEventListener(\"mousedown\", handleClick);\r\n document.addEventListener(\"touchstart\", handleClick); \r\n \r\n \/\/ cleanup\r\n return () => {\r\n   document.removeEventListener(\"mousedown\", handleClick);\r\n   document.removeEventListener(\"touchstart\", handleClick);\r\n };\r\n}, [dropdownRef, buttonRef, modalRef]);\r\n\u200d\r\nconst handleSelect = () => {\u200d\r\n alert(\"Yay! Filters applied!\");\u200d\r\n setIsOpen(false);\r\n\u200d};\r\n \r\nreturn (\r\n < div className=\"filter_wrapper\" > \r\n   < button \r\n     ref={buttonRef}\r\n     onClick={() => setIsOpen(!isOpen)}\r\n     className=\"filter_button\"\r\n   >\r\n     JS Frameworks\r\n  < \/button >\r\n\u200d   {isOpen && (\r\n   < div ref={dropdownRef} className=\"filter_dropdown\" >\r\n\u200d     < div >\r\n\u200d       Dropdown content goes here\r\n\u200d       < div className=\"filter_dropdown_actions\" >\r\n\u200d         < button onClick={() => handleSelect()}      className=\"filter_dropdown_button\" >\r\n         Select\r\n        < \/button >\r\n      < \/div >\r\n    < \/div >\r\n  < \/div >\r\n)}\r\n      \r\n {isOpen && (\r\n   < FilterModalComponent\r\n\u200d     ref={modalRef}\r\n     onSelect={() => handleSelect()}\r\n     onCancel={() => setIsOpen(false)}\r\n   >\r\n    Modal content goes here.\r\n\u200d   < \/FilterModalComponent >\r\n  )}\r\n\u200d  < \/div >\r\n );\r\n}\r\n<\/pre>\n<p><strong>Putting all the pieces together<\/strong><\/p>\n<p>Now, it\u2019s time to give actual user inputs and see how it works. We are going to implement multiple select filters from which users can choose the JS framework.<\/p>\n<pre>\r\nimport React, { useState } from \"react\";\r\n\u200dimport \".\/main.css\";\r\n\u200dimport FilterComponent from \".\/FilterComponent\";\r\n \r\nconst frameworks = [\"ReactJS\", \"AngularJS\", \"VueJS\", \"NodeJS\", \"EmberJS\"];\r\n \r\nexport default function DemoApp() {\r\n\u200d\r\n const [selectedFrameworks, setSelectedFrameworks] = useState([]);\r\n \r\n const handleSelect = framework => {\r\n   const isSelected = selectedFrameworks.includes(framework);\r\n   const newSelection = isSelected\r\n   ? selectedFrameworks.filter(currentTech => currentTech !== framework)\r\n   : [...selectedFrameworks, framework];\r\n   setSelectedFrameworks(newSelection);};\r\n \r\nreturn (\r\n < div className=\"app_container\" >\r\n   < h2 >Building responsive filter component< \/h2 >\r\n   < FilterComponent\r\n      label=\"JS Frameworks\" \r\n      onSelect={() => alert(selectedFrameworks)}\r\n    >\r\n\u200d     < div className=\"frameworks-list\" >\r\n       {frameworks.map((framework, index) => {\r\n         const isSelected = selectedFrameworks.includes(framework);\r\n         return (\r\n           < label key={index} >\r\n             < input\r\n               type=\"checkbox\"\r\n               checked={isSelected}\r\n               onChange={() => handleSelect(framework)}\r\n             \/ >\r\n\u200d             < span className=\"ml-2 text-base text-gray-500 font-heading\" >\r\n\u200d               {framework}\r\n\u200d             < \/span >\r\n           < \/label >   \r\n           ); \r\n         })}\r\n     < \/div >\r\n\u200d     < \/FilterComponent >\r\n < \/div >\r\n );\r\n}\r\n<\/pre>\n<p>This is how our Filter component with checkboxes of JS frameworks looks like &#8211;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image4-6.png\" alt=\" Filter component\" width=\"1100\" height=\"543\" class=\"aligncenter size-full wp-image-16199\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image4-6.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image4-6-300x148.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image4-6-1024x505.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/image4-6-768x379.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<p>And on mobile screens &#8211; <\/p>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/15-01-2021-Friday-Blog-\u2013-5-2.png\" alt=\"mobile screens\" width=\"1100\" height=\"688\" class=\"aligncenter size-full wp-image-16210\" srcset=\"https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/15-01-2021-Friday-Blog-\u2013-5-2.png 1100w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/15-01-2021-Friday-Blog-\u2013-5-2-300x188.png 300w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/15-01-2021-Friday-Blog-\u2013-5-2-1024x640.png 1024w, https:\/\/www.bacancytechnology.com\/blog\/wp-content\/uploads\/2021\/01\/15-01-2021-Friday-Blog-\u2013-5-2-768x480.png 768w\" sizes=\"auto, (max-width: 1100px) 100vw, 1100px\" \/><\/p>\n<h2 id=\"4\">Conclusion<\/h2>\n<p>So, this was about how to build a responsive filter component. I hope you are pretty clear about its implementation. If you are looking for any development support regarding ReactJS development, then Bacancy Technology is a one-stop solution to <a href=\"https:\/\/www.bacancytechnology.com\/hire-reactjs-developer\" target=\"_blank\" rel=\"noopener\">hire ReactJS developer<\/a> to build an optimal product. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Your end-users always expect the UI to be more consistent, comfortable, and attractive in web and mobile applications. With that consideration, the product should be developed, keeping the user interface\u2019s consistency in their minds. This task can be challenging when there\u2019s a need for a responsive website for different screen widths and layouts. So, I [&hellip;]<\/p>\n","protected":false},"author":151,"featured_media":16204,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"_lmt_disableupdate":"no","_lmt_disable":"no","footnotes":""},"categories":[988],"tags":[],"coauthors":[2429],"class_list":["post-16194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"acf":[],"modified_by":"Chandresh Patel","_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/16194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/users\/151"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/comments?post=16194"}],"version-history":[{"count":0,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/posts\/16194\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media\/16204"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/media?parent=16194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/categories?post=16194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/tags?post=16194"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/blog\/wp-json\/wp\/v2\/coauthors?post=16194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}