Learn how to build a simple yet powerful modal component. (CRA, Next.js and TypeScript)<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*4g6GsBUFbctoqNjnzXK7fg.jpeg" /><figcaption>Photo by <a href="https://unsplash.com/@lautaroandreani?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Lautaro Andreani</a> on <a href="https://unsplash.com/s/photos/reactjs?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption></figure>Modals (also called a modal window, modal popup, modal dialog) display content that temporarily blocks interactions with the main view of the UI. In this tutorial, we will build a simple yet powerful modal component for our React project.At the end of the tutorial, there will be a live demo.Let’s get started.First, we need to create React Portal.<blockquote>React Portal is a first-class way to render child components into a DOM node outside of the parent DOM hierarchy defined by the component tree hierarchy. The Portal’s most common use cases are when the child components need to visually break out of the parent container like modal boxes, tooltips, hovercards, loaders…</blockquote><h4>Creating React Portal in CRA</h4>Edit public/index.html and add:<pre> &lt;body&gt; &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt; &lt;div id=&quot;root&quot;&gt;&lt;/div&gt; &lt;--- Add this ---&gt; &lt;div id=&quot;modal-root&quot;&gt;&lt;/div&gt; &lt;/body&gt;</pre><h4>Creating React Portal in Next.js</h4>Create _document.jsx or _document.tsx if you are using TypeScript.<pre>import Document, { Html, Head, Main, NextScript } from &#39;next/document&#39;</pre><pre>class MyDocument extends Document { static async getInitialProps(context) { const initialProps = await Document.getInitialProps(context) return { ...initialProps } }</pre><pre> render() { return ( &lt;Html&gt; &lt;Head /&gt; &lt;body&gt; &lt;Main /&gt; &lt;NextScript /&gt; &lt;/body&gt; &lt;/Html&gt; ) } }</pre><pre>export default MyDocument</pre>For TypeScript, import DocumentContext and type context in getInitialProps so like this: getInitialProps(context: DocumentContext)Add before &lt;/body&gt; :&lt;div id=”modal-root”&gt;&lt;/div&gt;<h4>Creating useOnClickOutside hook</h4>We will create useOnClickOutsidehook which accepts React.SetStateActionas a parameter, we will pass the setShowModal state action. This hook will help us to manage outside clicks, for the inside close click, there will be another handle method.The hook will create a ref inside and process it for click handling then return this ref.We will attach this ref to the modal and it will check if clicked outside or inside the modal.There will be another option for re-render or hide &amp; show by CSS display property on close and open. This option is very useful for some scenarios.<h4>JS:</h4>Completed hooks/useOnClickOutside.jsfile:<pre>import React from &quot;react&quot;;</pre><pre>const useOnClickOutside = (handle) =&gt; { const ref = React.useRef(null); const handleClickOutside = (e) =&gt; { if (ref.current &amp;&amp; !ref.current.contains(e.target)) { handle(e); } }; React.useEffect(() =&gt; { window.addEventListener(&quot;click&quot;, handleClickOutside, true); return () =&gt; { window.removeEventListener(&quot;click&quot;, handleClickOutside, true); }; }); return ref; }; export default useOnClickOutside;</pre><h4>TypeScript:</h4>Completed hooks/useOnClickOutside.tsfile:<pre>import React from &quot;react&quot;;</pre><pre>const useOnClickOutside = ( handle: ( e: | MouseEvent | React.MouseEvent&lt;HTMLElement&gt; ) =&gt; void) =&gt; { const ref = React.useRef&lt;HTMLInputElement&gt;(null);</pre><pre>const handleClickOutside = (e: MouseEvent) =&gt; { if (ref.current &amp;&amp; !ref.current.contains(e.target as Node)) { handle(e); } };</pre><pre>React.useEffect(() =&gt; { window.addEventListener(&quot;click&quot;, handleClickOutside, true); return () =&gt; { window.removeEventListener(&quot;click&quot;, handleClickOutside, true); }; });</pre><pre>return ref; };</pre><pre>export default useOnClickOutside;</pre><h4>Modal Component</h4>Create components/modal.js or tsx. Create modal.css.Import React, ReactDom, useOnClickOutside hook and modal.css to modal.js<pre>import React from &quot;react&quot;; import ReactDOM from &quot;react-dom&quot;; import useOnClickOutside from &quot;../hooks/useOnClickOutside&quot;; import &quot;../modal.css&quot;;</pre>Create modal const, showModal will be our state and setShowModal will be our setStateAction. title and reRenderOnCloseOpen are will be optional.<pre>const Modal = ({ showModal, setShowModal, children, title = &quot;&quot;, reRenderOnCloseOpen = true }) =&gt; {};</pre>handleCloseClick will be used both on the close button and the close outside hook.<pre>const handleCloseClick = (e) =&gt; { e.preventDefault(); setShowModal(false); };</pre><pre>const ref = useOnClickOutside(handleCloseClick);</pre>We will attach the ref object to modal-main instead of modal-container.<pre>const modalContent = (showModal || !reRenderOnCloseOpen) &amp;&amp; ( &lt;div className={`modal-container ${ !showModal &amp;&amp; !reRenderOnCloseOpen ? &quot;hidden&quot; : &quot;&quot; } `} &gt; &lt;div ref={ref} className=&quot;modal-main&quot;&gt; &lt;div className=&quot;relative&quot;&gt; &lt;div className=&quot;absolute right-0&quot;&gt; &lt;button onClick={handleCloseClick}&gt;x&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div&gt;{title}&lt;/div&gt; &lt;div&gt;{children}&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; );</pre>At the end of the code, we need to return with ReactPortal .For CRA:<pre>return ReactDOM.createPortal( modalContent, document.getElementById(&quot;modal-root&quot;) );</pre>For Next.js: We need to check if the window is attached to the DOM because of the hydration progress.<pre>if (typeof window !== &quot;undefined&quot;) { return ReactDOM.createPortal( modalContent, document.getElementById(&quot;modal-root&quot;) ); } else { return null; }</pre><h4>Completed Modal Component</h4><pre>import React from &quot;react&quot;; import ReactDOM from &quot;react-dom&quot;; import useOnClickOutside from &quot;../hooks/useOnClickOutside&quot;; import &quot;../modal.css&quot;;</pre><pre>const Modal = ({ showModal, setShowModal, children, title = &quot;&quot;, reRenderOnCloseOpen = true }) =&gt; { const handleCloseClick = (e) =&gt; { e.preventDefault(); setShowModal(false); };</pre><pre>const ref = useOnClickOutside(handleCloseClick); const modalContent = (showModal || !reRenderOnCloseOpen) &amp;&amp; ( &lt;div className={`modal-container ${ !showModal &amp;&amp; !reRenderOnCloseOpen ? &quot;hidden&quot; : &quot;&quot; } `} &gt; &lt;div ref={ref} className=&quot;modal-main&quot;&gt; &lt;div className=&quot;relative&quot;&gt; &lt;div className=&quot;absolute right-0&quot;&gt; &lt;button onClick={handleCloseClick}&gt;x&lt;/button&gt; &lt;/div&gt; &lt;/div&gt; &lt;div&gt; &lt;div&gt;{title}&lt;/div&gt; &lt;div&gt;{children}&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; );</pre><pre>return ReactDOM.createPortal( modalContent, document.getElementById(&quot;modal-root&quot;) ); }; export default Modal;</pre>For the Typescript:Add Props interface:<pre>interface Props { showModal: boolean; setShowModal: React.Dispatch&lt;React.SetStateAction&lt;boolean&gt;&gt;; title?: string; reRenderOnCloseOpen?: boolean; }</pre>Change const Modal = to const Modal: React.FC&lt;Props&gt; =Add type to handleCloseClick’s e parameter (e: React.MouseEvent&lt;HTMLElement&gt; | MouseEvent)Also do not forget to check hydration when returning the portal object for Next.js.<h4>Styling</h4>Edit the modal.css and add these:<pre>.modal-container { position: fixed; top: 0; width: 100%; height: 100%; z-index: 999; display: flex; justify-content: center; align-items: center; }</pre><pre>.modal-main { width: 18rem; height: 20rem; border-radius: 0.5rem; padding: 1rem; background-color: #464646; color: white; }</pre><pre>.flex { display: flex; }</pre><pre>.hidden { display: none; } .right-0 { right: 0; }</pre><pre>.relative { position: relative; }</pre><pre>.absolute { position: absolute; }</pre>Usage:<pre>import Modal from &quot;./components/Modal&quot;; import React from &quot;react&quot;;</pre><pre>export default function App() { const [showModal, setShowModal] = React.useState(false);</pre><pre>return ( &lt;div className=&quot;App&quot;&gt; &lt;button onClick={() =&gt; { setShowModal(true); }} &gt; Open Modal &lt;/button&gt; &lt;Modal title=&quot;Example Modal&quot; showModal={showModal} setShowModal={setShowModal} &gt; &lt;div&gt;ModalContent&lt;/div&gt; &lt;/Modal&gt; &lt;/div&gt; ); }</pre>Live Demo: <a href="https://codesandbox.io/s/react-modal-8zsxk">https://codesandbox.io/s/react-modal-8zsxk</a><h3>Final Words</h3>In this tutorial, we implemented a simple yet powerful Modal. You can improve it as you want if you get the main idea.You can check my GitHub if you want to see my other works.<a href="https://github.com/sinanbekar">https://github.com/sinanbekar</a><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=ee599ef229fa" width="1" height="1" alt="">

React Modal Component Implementation

<h4>Laravel Echo, Breeze, Socket.io, Redis, Inertia.js, TailwindCSS stack</h4>Laravel and React are awesome, thanks to WebSocket protocol and easy-to-use Laravel Echo library, we can build real-time applications easily.<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*yHDsAGZFFnOamXoPYXW4tQ.jpeg" /></figure>In this article, we will be using Laravel Echo Server as socket.io server which has Laravel Echo compatibility.Laravel Echo Server and Laravel 8 communication will be handled by Redis.We will kick start our application without building auth system with Laravel Breeze also with Inertia.js we don’t need to write API for React and Laravel communication. In addition to these, we will be using TailwindCSS for styling which also comes default with Breeze React stack.You can find the completed demo repo and production demo link at the bottom.<h3>Getting Started with Laravel Setup</h3>Step 1 — Create a new Laravel project as guided in the <a href="https://laravel.com/docs/8.x/installation">official documentation</a>.Docker (Laravel Sail) is the best and fastest way to develop Laravel apps if you ask me. Simply change “example-app” to anything you like and run the following command in your terminal:<pre>curl -s https://laravel.build/example-app | bash</pre>then cd to folder and run:<pre>./vendor/bin/sail up -d</pre>First sail up command could take a long time.You can access Laravel Welcome page with <a href="http://localhost">http://localhost</a>Set sail as an alias:<pre>alias sail=&#39;[ -f sail ] &amp;&amp; bash sail || bash vendor/bin/sail&#39;</pre>With setting alias, you don’t need to type ./vendor/bin.If you don’t have npm, yarn or node in your system, you can use sail npm, sail yarn, sail node.Step 2 — Installing Breeze package<blockquote><a href="https://github.com/laravel/breeze">Laravel Breeze</a> is a minimal, simple implementation of all of Laravel’s <a href="https://laravel.com/docs/8.x/authentication">authentication features</a>, including login, registration, password reset, email verification, and password confirmation. Laravel Breeze’s default view layer is made up of simple <a href="https://laravel.com/docs/8.x/blade">Blade templates</a> styled with <a href="https://tailwindcss.com">Tailwind CSS</a>.</blockquote>Run:sail composer require laravel/breeze --devExtracting package with React scaffold:<pre>sail artisan breeze:install react</pre>Now run the following for installing packages and migration:<pre>npm install &amp;&amp; npm run dev</pre><pre>sail artisan migrate</pre>Step 3 — Docker configurationOpen docker-compose.yml and add bolded ones.<pre>. . . networks: - sail laravel-echo-server: image: &#39;oanhnn/laravel-echo-server&#39; ports: - &#39;6001:6001&#39; volumes: - &#39;${PWD}/laravel-echo-server.json:/app/laravel-echo-server.json&#39; networks: - sail</pre><pre>networks: sail: driver: bridge . . .</pre>Create laravel-echo-server.json to root folder and paste this for the development environment. You should make changes later for production.<pre>{ &quot;authHost&quot;: &quot;<a href="http://laravel.test">http://laravel.test</a>&quot;, &quot;authEndpoint&quot;: &quot;/broadcasting/auth&quot;, &quot;clients&quot;: [], &quot;database&quot;: &quot;redis&quot;, &quot;databaseConfig&quot;: { &quot;redis&quot;: { &quot;port&quot;: &quot;6379&quot;, &quot;host&quot;: &quot;redis&quot;, &quot;keyPrefix&quot;: &quot;laravel_database_&quot; } }, &quot;devMode&quot;: true, &quot;host&quot;: null, &quot;port&quot;: &quot;6001&quot;, &quot;protocol&quot;: &quot;http&quot;, &quot;socketio&quot;: {}, &quot;sslCertPath&quot;: &quot;&quot;, &quot;sslKeyPath&quot;: &quot;&quot;, &quot;subscribers&quot;: { &quot;http&quot;: true, &quot;redis&quot;: true }, &quot;apiOriginAllow&quot;: { &quot;allowCors&quot;: true, &quot;allowOrigin&quot;: &quot;<a href="http://localhost">http://localhost</a>&quot;, &quot;allowMethods&quot;: &quot;GET, POST&quot;, &quot;allowHeaders&quot;: &quot;Origin, Content-Type, X-Auth-Token, X-Requested-With, Accept, Authorization, X-CSRF-TOKEN, X-Socket-Id&quot; } }</pre>Delete the container and create a new one:<pre>sail down &amp;&amp; sail up -d</pre>Step 4 — Laravel basic configurationsUncomment App\Providers\BroadcastServiceProvider::class in config/app.phpSet BROADCAST_DRIVER to redis in .env environment variables file.Step 5 — Install client packages<pre>npm install --save laravel-echo socket.io-client@2.4.0</pre>Add this code to /resources/js/bootstrap.js<pre>import Echo from &#39;laravel-echo&#39;;</pre><pre>window.io = require(&#39;socket.io-client&#39;);</pre><pre>window.Echo = new Echo({ broadcaster: &#39;socket.io&#39;, host: window.location.hostname + &#39;:6001&#39;, });</pre><h3>Testing Echo Server</h3>Create test event by using artisan:<pre>sail artisan make:event TestEvent</pre>We will create a public channel (no auth required) for testing manually and returning [‘title’ =&gt; ‘Test Title’, ‘message’ =&gt; ‘Test Message’] array.TestEvent event should look like this:<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/a2c5320fc0ed819905af7b9148807b42/href">https://medium.com/media/a2c5320fc0ed819905af7b9148807b42/href</a></iframe>Now add a testing route for broadcasting:<pre>Route::get(&#39;add-notification&#39;, function () { broadcast(new \App\Events\TestEvent); return &#39;Test&#39;; });</pre>Add this to /resources/js/bootstrap.js (only for temporary, delete after testing)<pre>window.Echo.channel(&#39;test-channel&#39;).listen(&#39;TestEvent&#39;, event =&gt; { console.log(event); });</pre>Compile the frontend assets (Mix):<pre>npm run dev</pre>Go to http://localhost, on another tab go to http://localhost/add-notification .You should see broadcastWith() return data in the welcome page console.<h3>Building the Chat App</h3>Step 1 — Creating Models and MigrationsCreate a Message model with artisan:<pre>sail artisan make:model Message --migration</pre>Go to database/migrations folder and add ‘user_id’, ‘room_id’ and ‘message’ columns to the messages table migration file:<pre>$table-&gt;integer(&#39;user_id&#39;)-&gt;unsigned(); $table-&gt;integer(&#39;room_id&#39;)-&gt;unsigned(); $table-&gt;text(&#39;message&#39;);</pre>Create a Room model with artisan:<pre>sail artisan make:model Room --migration</pre>In the same folder, add ‘name’ column to the rooms table migration file:<pre>$table-&gt;string(&#39;name&#39;)-&gt;unique();</pre>You can delete timestamps if you want.Migrate changes. You can also clear the cache with sail artisan cache:clearif you get an error.<pre>sail artisan migrate</pre>Now we will establish relationships by adding methods to models.In the Message model set ‘message’ and ‘room_id’ fillable, add user() and room() method.<pre>protected $fillable = [&#39;message&#39;, &#39;room_id&#39;];</pre><pre>public function user() { return $this-&gt;belongsTo(User::class); } public function room() { return $this-&gt;belongsTo(Room::class); }</pre>In the Room model set ‘name’ fillable and add messages() method.<pre>protected $fillable = [&#39;name&#39;];</pre><pre>public function messages() { return $this-&gt;hasMany(Message::class); }</pre>Add this method to the User model:<pre>public function messages() { return $this-&gt;hasMany(Message::class); }</pre>Step 2 — MessageSent eventCreate a MessageSent event with artisan:<pre>sail artisan make:event MessageSent</pre>Now we will be setting User, Room and Message object properties, returning Presence channel in broadcastOn() method for auth requirement also instead of passing all model objects data, we will be passing specific broadcasting data to the client for security reasons.MessageSent event should look like this:<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b5ad47239a838c40b2671a0ea5811ab8/href">https://medium.com/media/b5ad47239a838c40b2671a0ea5811ab8/href</a></iframe>Step 3 — Generating some database data using tinkerRun tinker with the following:<pre>sail artisan tinker</pre>Run the following command to create five users:<pre>\App\Models\User::factory(5)-&gt;create();</pre>Run the following command to create rooms:<pre>DB::table(&#39;rooms&#39;)-&gt;insert(array_map(function ($room) { return [&#39;name&#39; =&gt; $room]; }, [&#39;general&#39;, &#39;room1&#39;, &#39;room2&#39;, &#39;room3&#39;, &#39;room4&#39;])); }</pre>Step 4 — Creating controller and setting routing configurationsCreate a ChatsController with artisan:<pre>sail artisan make:controller ChatsController</pre>In the controller with renderChat() method, we are rendering a chat page with saved messages, room data; with sendMessage() method we are creating new message data to the database.Completed ChatsController should look like this:<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c0e8ba6e8614f03fe761001315a92171/href">https://medium.com/media/c0e8ba6e8614f03fe761001315a92171/href</a></iframe>/broadcasting/auth is the auth request channel route.We will allow only logged users (with presence channel) and all logged users can get auth.routes/channel.php<pre>Broadcast::channel(&#39;room.{id}&#39;, function ($user) { return $user-&gt;only(&#39;id&#39;, &#39;name&#39;); });</pre>Add routes for chat page and message POST request:routes/web.php<pre>Route::middleware([&#39;auth&#39;, &#39;verified&#39;])-&gt;group(function () { Route::get(&#39;/chat/{room?}&#39;, [ChatsController::class, &#39;renderChat&#39;])-&gt;name(&#39;chat&#39;); Route::post(&#39;/message&#39;, [ChatsController::class, &#39;sendMessage&#39;])-&gt;name(&#39;message&#39;); });</pre>Step 5 — Setting up the client-sideWe will listen to events using Laravel Echo library’s methods.We will join presence channel with join(), getting active users with here(), handling ‘user joining’ event with joining(), handling ‘user leaving’ event with leaving(), real-time messages with listen(), handling ‘typing event’ with listenForWhisper()We need to chain these methods in componentDidMount() lifecycle method.leave() method must be called in componentWillUnmount() lifecycle method for handling ‘leaving user’ event.Basically, we will fetch all messages that the room has before on the first render, message sending event will be handled real-time by socket then we will post it to the database.Go to resources/js/Components and create Chat.js. Chat component should look like this:<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/2d350449c1929f42d7699800596d06f9/href">https://medium.com/media/2d350449c1929f42d7699800596d06f9/href</a></iframe>Go to resources/js/Pages/ and create Chat.js:<iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/7642c3d2a9360379ac4d9b0196580383/href">https://medium.com/media/7642c3d2a9360379ac4d9b0196580383/href</a></iframe>Compile the frontend assets (Mix):<pre>npm run dev</pre>Now you can access the chat page by visiting <a href="http://localhost/chat">http://localhost/chat</a>Production demo: (Customized)<a href="http://laravel-chat-app.ml/">http://laravel-chat-app.ml/</a>The completed project is on Github.<a href="https://github.com/sinanbekar/laravel-realtime-chat-app">GitHub - sinanbekar/laravel-realtime-chat-app: Laravel real time chat app demo. Step by step explained in Medium article.</a><h3>Final Words</h3>In this article, I discussed how you could easily setup a real-time chat app with Laravel and modern technologies.Of course, this is the simplest implementation. You need to do better configuration and tweaks for large production and security.If you need further help with the code or the application setup, do leave a comment.<img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=5cae5a7c22d4" width="1" height="1" alt=""><hr><a href="https://towardsdev.com/build-a-real-time-chat-app-with-laravel-and-react-5cae5a7c22d4">Build a Real-Time Chat App with Laravel and React</a> was originally published in <a href="https://towardsdev.com">Towards Dev</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.

Blog

React Modal Component Implementation

Build a Real-Time Chat App with Laravel and React