Modal build better cloud infrastructure for data apps

Modal

modal

A guide on how to master React Native modal complex flows. Do you find using modals in React Native to be a bit of a pain? You’re not alone! Trying to keep control of its open state and repeating the code everywhere you want to use it can be pretty tedious. And the problem only gets worse when you try to create complex flows. Once you get past two modals, your main component is a mess, and the state is all over the place.  I’ve experienced this first-hand in many big companies, like (by AB-InBev), , and now at . Zé Delivery Alfred Delivery X-Team But don’t despair! Most people think that’s the only way. Still, in this article, I will explain how problems start and how to deal with them elegantly while improving your development experience. It will even help you use modals inside and outside React components (in Sagas, for example!) . This article's teachings have been encapsulated in this library: https://github.com/GSTJ/react-native-magic-modal The Challenges Of A “Simple Flow” Imagine this. You work on Facebook, and the Product Team asks for a ‘simple flow’: As a company, I would like to show a modal asking the user to rate the app between 0–5 stars after the user likes a post for the first time. a. I show another modal asking for feedback on how to improve. f the user rates it with less than four stars, b. , show a happy modal asking the user to rate us on the app store. Otherwise , show a ‘thanks’ modal, thanking the user for their support. Finally It isn’t so far-fetched, right? Four modals deep, it brings up a lot of questions from the developer's side. Where should this logic be placed? How should we process the output from the last modal? How do we keep this clean? Can you spot what the code will be like? Do you see yourself writing complex logic to handle the order of the modals, making sure every modal has already transitioned to not visible and having tons of useStates in place? The growth of the problem Imagine you finally did it, you finished the flow, and the Product Team loves the outcome! They now want to expand this flow to show up only once whenever the user likes **anything** for the first time, whether it’s a post, a comment, or a product. How would you approach it? You will have to copy-paste all those four modals on every screen where liking is possible. Maybe you even go ahead and turn all of those into a single component. Even then, adding this wrapper component to every screen is still needed. A few months pass by, and the Development Team now sees the complexity of handling likes differently on every screen and wants to pass this responsibility to a that can be called from anywhere. How do you show the modal only when the [Saga’s Action](https://(https://redux.js.org/tutorials/fundamentals/part-3-state-actions-reducers) is fired? Sagas run outside React components. Redux Saga I can confidently say that I’ve experienced those scenarios happening. Working in the food delivery industry, we consistently asked the user to rate the app, the delivery, and their purchase. How to avoid it? Let’s start by tackling the state. Managing it is one of the most important things while working with modals. Expose Internal Properties With “useImperativeHandle” In short, allows you to expose internal properties via Ref. If you have a modal component, you could use to expose their `show` and `hide` functions. Meaning it can take care of its own state without delegating to its parent component with , for example.  This can be helpful when you want to make your code clearer and avoid passing down many props. Let’s give it a try: useImperativeHandle useImperativeHandle props import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const ExampleModal = React.forwardRef((ref) => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(ref, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}); That's the transition to a better place. While this is a step in the right direction, it doesn't solve all of our problems. Namely: To use it, we need to pass a prop from a hook, which means we can't call outside React components. ref useRef show We still need to instantiate the component on every screen. There’s no way to use it on multiple screens without having repeated. ExampleModal Externally exposing the component’s Ref Most people don't know this, but React has a createRef method that can be used outside React components. In fact, it's even in the React-Navigation documentation for edge cases. In practice, the flexibility it brings can be seen here: import React, { useState, useImperativeHandle } from 'react';
import { Text } from 'react-native';
import ModalContainer from 'react-native-modal';

export const imperativeModalRef = React.createRef();

export const SmartExample = () => {
  const [isVisible, setIsVisible] = useState(false);

  const show = () => setIsVisible(true);
  const hide = () => setIsVisible(false);

  useImperativeHandle(imperativeModalRef, () => ({ hide, show }));

  return (
    <ModalContainer onBackdropPress={hide} isVisible={isVisible}>
      <Text>My awesome modal!</Text>
    </ModalContainer>
  );
}; Now can be imported and used anywhere, as long as is on the root. We can use show and hide from every component, function, or . imperativeModalRef SmartExample Saga That solves most of our issues, but there's still one: It is hard to manage a project with many modal refs and modals on the root. That's where you can get creative with abstractions to make the render any modal you want! One way to do this is to make the function receive a component and render it. SmartExample show Going the extra mile Instead of making you guys reinvent the wheel, I've created an open-source library that encapsulates all these concepts and more, with full TypeScript support based on . react-native-modal Here's a basic idea of how to use it: "Talk is cheap. Show me the code." ― Linus Torvalds. import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { MagicModalPortal, magicModal } from 'react-native-magic-modal';

const ConfirmationModal = () => (
  <View>
    <TouchableOpacity onPress={() => magicModal.hide({ success: true })}>
      <Text>Click here to confirm</Text>
    </TouchableOpacity>
  </View>
);

const ResponseModal = ({ text }) => (
  <View>
    <Text>{text}</Text>
    <TouchableOpacity onPress={() => magicModal.hide()}>
      <Text>Close</Text>
    </TouchableOpacity>
  </View>
);

const handleConfirmationFlow = async () => {
  // We call it with or without props, depending on the requirements of the modal.
  const result = await magicModal.show(ConfirmationModal);

  if (result.success) {
    return magicModal.show(() => <ResponseModal text="Success!" />);
  }

  return magicModal.show(() => <ResponseModal text="Failure :(" />);
};

export const MainScreen = () => {
  return (
    <View>
      <TouchableOpacity onPress={handleConfirmationFlow}>
        <Text>Start the modal flow!</Text>
      </TouchableOpacity>
      <MagicModalPortal />
    </View>
  );
}; Example using react-native-magic-modal As you can see, it gives you loads of flexibility, unimaginable before, by simply abstracting the concepts we’ve gone through. Now, the confirmation flow can be called from anywhere. Inside or outside React components. Also, it automatically deals with common issues regarding modals. Did you know that, in React Native, you can’t show two modals simultaneously? Even if you try to show a modal right after another, it would probably fail as the last modal is still animating its ‘close’ state. Fortunately, the issue is already dealt with on our side. https://github.com/react-native-modal/react-native-modal/issues/30 This same logic has already been battle-tested on big companies I’ve worked on, like (by AB-InBev), , and . Zé Delivery Alfred Delivery X-Team The documentation is easy to understand and will give you a headstart. You can learn more about it here: React Native Magic Modal https://github.com/GSTJ/react-native-magic-modal Contributions accepted! Thanks for the read. If you liked the article, follow me on and . Linkedin Github Also Published here

What Everyone Is Getting Wrong About React Native Modals

Modal is a common UX element. A modal is a dialog box/popup window that is displayed on top of the current page. You must have used pop-ups and notifications for your website. For some people pop-ups are really annoying😫 if it doesn't behave as it should. It must have good UI/UX. In this article, we're going to create an efficient 🤩 from scratch without using any library. Modal component Demo Link🖤: https://react-reusable-components.vercel.app/ Our main goal is to create an efficient modal which, Has a good layout Doesn't break ui when we use overflow in the parent component Can render content Dynamically Clean and Elegant animation Looks good (good UI) Have more control for User (like clicking outside can close modal) etc. Let’s get started! If you prefer video format then you can watch this video 📽👇 Create your react-app using, npx create-react-app react-modal For this tutorial, I'm going to use so make sure you have installed node-sass package. To install it do, Sass npm install node-sass Let's create a Basic Modal component open App.js file. clean🧹 unnecessary code. Now create one button in the App.js file to open and close modal just like this 👇 </div> <div className= "App" > < button > Modal </ button > Create one state to open and close modal. Write below 👇 code: );
} import { useState } from "react" ; import "./App.scss" ; function App ( ) { const [modal, setModal] = useState( false ); const Toggle = () => setModal(!modal); return ( < div className = "App" > < button className = "clickme" onClick = {() => Toggle()}> Modal </ button > </ div > export default App; Contains modal state which is false initially. Line 6: A Toggle method to toggle modal state from false to true and vice-versa. Line 7: Make sure to connect method to onClick of the button. Line 11: Toggle() Next, create file and Write below 👇 code: Modal.js );
}; const Modal = () => { return ( < div > Modal </ div > export default Modal; Now import it in the Modal in file. App.js Here we have imported `Modal` component. And passed 
modal state as shown in the props. Line 17: Now open and write below code 👇 Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show } ) => { return ( <> { show ? < div className = "modalContainer" > < div className = "modal" > < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" > < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is Modal Content </ main > < footer className = "modal_footer" > < button className = "modal-close" > Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Show from the props. Line 3: We will display the modal only when the show state is true. Line 7: This is the whole .
 Modal Container div contains the modal. Line 9 to 30: Modal layout In the modal div, There is one header that contains the and Button (You can use any icon for the close button). modal title close The main tag contains the of the modal. content Footer has 2 buttons one is and another is . submitted canceled Now when you press a button modal will show and on pressing again it will close the modal. First Let's add some styling to our modal. Create a file and import it in the file. Modal.scss Modal.js Copy and paste this styling in the file. Modal.scss This will give your modal a better look. By applying this you can make it 
look like frost-glass. Line 21: backdrop-filter Let's add Close event in modal In the file pass toggle method as props in the modal just like this 👇 App.js <Modal show={modal} title= "My Modal" close={Toggle}/> open file and deconstruct close from the props. Modal.js );
}; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null } </> export default Modal; Deconstruct Close from the props. Line 3: We have added close method in 3 places: At the close button. Line 16: At the cancel button. Line 22: : We have also added a close method here too. Why? because whenever the user clicks outside it should close the modal. So here, when the user clicks on the modalContainer it closes the modal. Line 11 here we have to stop these click events in the modal else it will close it so for that we have used e.stopPropagation(). Line 13: You can also add event Listener and add functionality 
in which when user clicks esc key, It closes the modal. (It is good for user experience) hint: Let's use Portals to render the Modal component ⏩ What🧐 are ? portals Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component. ⏩ Why🤔 should we use portals? Sometimes when we use or properties in the parent component then we need child component (like modal or dialogues) to break container visually, and portals can be very handy to do that because it renders children outside of DOM hierarchy. overflow z-index ⏩ The syntax✍ for to create a portal👇 ( 
element, ) ReactDOM.createPortal DOM node where you want to render this element So let's implement portals in our Modal component. To use the portal we have to create one more element in the dom. Generally, our whole App renders in the div with the id root. Open file. index.html and above the root div create one more div with the id . modal Just like this 👇 <div id= "modal" /> < div id = "root" /> Open file and edit it just like this, Modal.js );
}; import ReactDOM from "react-dom" ; import "./modal.scss" ; import Close from "./times-solid.svg" ; const Modal = ( { show, close } ) => { return ReactDOM.createPortal( <> { show ? < div className = "modalContainer" onClick = {() => close()} > < div className = "modal" onClick = {(e) => e.stopPropagation()}> < header className = "modal_header" > < h2 className = "modal_header-title" > Modal Title </ h2 > < button className = "close" onClick = {() => close()}> < img src = {Close} alt = "close" /> </ button > </ header > < main className = "modal_content" > This is modal content </ main > < footer className = "modal_footer" > < button className = "modal-close" onClick = {() => close()}> Cancel </ button > < button className = "submit" > Submit </ button > </ footer > </ div > </ div > : null }, document.getElementById("modal") </> export default Modal; Import ReactDom. Line 1: After return creates a portal using , As it's the first argument we have passed the whole modal component and for the second argument we have passed the dom node where we want to render it. Line 6: ReactDom.createPortal We want to render our component in the div with id modal. Line 34: Let's make Modal content Dynamic: open file and pass title as a prop and content inside the component as shown below, App.js This is Modal content
</Modal> <Modal show={modal} title= "My Modal" close={Toggle}> Here we have passed the title as props and modal content as the children. Open and write, Modal.js (Final Modal.js code) Deconstruct and from the props. Line 5: title children Insert title in the curly braces. Line 17: Render children using the curly braces. Line 22: Now if you want to add a little animation in the modal you can watch the video or you can go to the git repository and read📚 code. Thanks For Reading😄 Feel free to visit my youtube channel: @CodeBucks

ReactJS Custom Modal Component using Hooks and Portals

Componente modal personalizado de ReactJS usando ganchos y portales

Nowadays, Modals are one of the most used components in React Application, having an easy way to create React Modals will help you sheep Modals related features fast in your upcoming React Applications. In this tutorial, we will build A simple React Modal using only 22 lines of code. The gif below will help you understand what we are trying to build Let's started Create React Project First, create a simple react project using create-react-app CLI. $ npx Create-react-app SimpleModal React ; ReactDOM ; ; { ( <h1>Create React Modal in X line of code </h1> <button>Click Me</button> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App In this tutorial, we will use the package  which is a simple and Powerful react component with a lot of benefits : react-popup Modal, Tooltip, Menu: All in one 🏋️ Full style customization 👌 Function as children pattern to take control over your popup anywhere in your code. 💪 IE Support. 🚀 TypeScript Support 👌 All these clocks in at around 3 kB zipped. ⚡️ This package is available in npm repository as reactjs-popup. It will work correctly with all popular bundlers. $ yarn add reactjs-popup Create React Modal Import Component from reactjs-popup and start using it like the following. Popup Add property as a simple React Button element and set property to true. trigger modal React ; ReactDOM ; Popup ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        Modal Content
      </Popup> );
} rootElement = .getElementById( );
ReactDOM.render( import from "react" import from "react-dom" import from "reactjs-popup" import "./styles.css" ( ) function App return < = > div className "App" </ > div const document "root" , rootElement); < /> App Customizing and Styling  React Modal we need to create a file for Modal Content component and add some style Content.js React ; ({ close }) => ( <a className="close" onClick={close}>
      &times;
    </a> <div className="header"> Modal Title </div> <div className="content">
      {" "}
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Atque, a nostrum.
      Dolorem, repellat quidem ut, minima sint vel eveniet quibusdam voluptates
      delectus doloremque, explicabo tempore dicta adipisci fugit amet
      dignissimos?
      <br />
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur sit
      commodi beatae optio voluptatum sed eius cumque, delectus saepe
      repudiandae explicabo nemo nam libero ad, doloribus, voluptas rem alias.
      Vitae?
    </div> ); //content.js import from "react" export default < = > div className "modal" </ > div { : ;
} > { : ; : solid gray; : ; : center; : ;
} > { : ; : ;
} > { : auto;
} > { : ; : ; : center;
} > { : pointer; : absolute; : block; : ; : ; : - ; : - ; : ; : ; : ; : solid ;
} /* index.css */ .modal font-size 12px .modal .header width 100% border-bottom 1px font-size 18px text-align padding 5px .modal .content width 100% padding 10px 5px .modal .actions margin .modal .actions width 100% padding 10px 5px text-align .modal .close cursor position display padding 2px 5px line-height 20px right 10px top 10px font-size 24px background #ffffff border-radius 18px border 1px #cfcece Now it's time for some magic Because provides a child as function pattern, you have full control on Popup state reactjs-popup we will update our example to use a function as a child instead of a  react element to implement `close` button. React ; ReactDOM ; Popup ; Content ; ; { ( <h1>Create React Modal with 22 line of code </h1> <Popup modal trigger={<button>Click Me</button>}>
        {close => <Content close={close} />}
      </Popup>
    </div> <App /> //index.js import from "react" import from "react-dom" import from "reactjs-popup" import from "./Content.js" import "./styles.css" ( ) function App return < = > div className "App" );
}

const rootElement = document.getElementById("root");
ReactDOM.render( , rootElement); Final Result reactjs-popup : https://react-popup.elazizi.com/ Repo : https://github.com/yjose/create-react-modal-with-22-line-of-code Codesandbox : https://codesandbox.io/s/create-react-modal-with-22-lines-of-code-v2u7t Make sure to visit react-popup home page Thanks for reading! If you think other people should read this post and use this project, tweet, and share the post. Remember to follow me, so you can get notified about my future posts.

Create React Modal using reactjs-popup

Vue.js is a powerful JavaScript library used for building responsive and interactive user interfaces. Vue is used for its flexibility and simplicity. One of the special features of Vue.js that sets it apart is its plugin system which helps developers extend their Vue application functionality without altering its original behavior. In this article, we will explore what Vue plugins are, their benefits, how to integrate them into our Vue application, and examine some examples to gain a practical understanding of plugin usage. Vue.js plugins serve as modular components that extend the functionality of the Vue application without altering its original behavior. They also enable developers to add special features in the form of custom plugins and also add third-party plugins to the Vue app. Think of plugins as specialized tools you can add to a toolbox with each designed to extend and enhance the functionalities of your Vue application in a modular way. The way you can include a specific tool for a particular task in your toolbox is the same way Vue plugins add a specific functionality that is tailored to your application's needs. Imagine you have an application with multiple components, and you need to manage shared data across these components. Though Vue provides built-in features to handle data sharing, handling complex scenarios like this efficiently might require additional tools. Thereby the need for a plugin that can handle such a task. Vue plugins can be used to solve a wide range of problems from managing shared data across components to handling complex user interactions. They can also be used to improve the functionality of Vue applications and to optimize the rendering process. ​Vue.js plugins help developers solve a wide range of problems faced when building user interfaces. Below, are some examples of third-party plugins. Vue-select plugin is used for list filtering. Vuex plugin for state management. Vue-global for making global libraries available in the Vue application. Vue-directive for adding global directive in the Vue application. Syntax Now that we have understood the purpose and significance of Vue plugins, let us delve into the syntax for the incorporation of Vue plugins into our applications. Understanding this is very crucial in getting the benefits of plugins in our app. To use Vue.js third-party plugins, you first need to install it via the package manager npm or yarn. Once installed, you can make use of it in your app by importing it. The example below shows how to use a third-party plugin. npm install vue-plugin-name

// Import the plugin

import MyPlugin from 'my-plugin';

// Create a Vue instance

const app = createApp(App);

// Use the plugin

app.use(MyPlugin);

// Mount the app

app.mount('#app'); To use custom plugins, when creating custom plugins, you need to define a function that takes the Vue application instance as an argument. This function is where you add the functionality you want your plugin to provide. Below, is a syntax for creating a custom plugin. // Define the plugin
const MyPlugin = {
 install(app, options) {
 // Add functionality here

 app.config.globalProperties.$myMethod = function() {
   // Do something
 };
 },
};

// Create a Vue instance
const app = createApp(App);

// Use the plugin
app.use(MyPlugin);

// Mount the app
app.mount('#app'); Plugin Examples Let's explore some examples of the usage of plugins in Vue. In the example, we are going to look at the different forms of plugins. 1. Third-Party Plugins In this example, we will use the Vue router plugin used for handling page routing. / Step 1: Install Vue Router
npm install vue-router@4

// Step 2: Import and Use Vue Router
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
import About from './components/About.vue'

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

const app = createApp(App)

app.use(router)

app.mount('#app') 2. Custom Plugins They are personalized components you create in your app depending on your needs. Think of them as solutions you craft out yourself for a specific task. There are two examples to illustrate how custom plugins are made and applied to our app. The first example is customizing a greeting message while the other one is customizing a modal. Output: Greeting Message Example This example defines a Vue.js plugin that utilizes the options parameter and also adds a global method $displayGreeting to the app. ​The use of app.config.globalProperties object here is to add global properties or methods to the Vue instance. And this enables the properties or methods to be accessible by any component in the application. // Define a Vue.js plugin that adds a global method for displaying a greeting message

export default {

 install: (app, options) => {

   // Add a global method $displayGreeting to the Vue.js application

   // This method constructs a greeting message using the provided name and some predefined greeting and ending strings

   app.config.globalProperties.$displayGreeting = function(name) {

     this.greeting = options.greeting + name + options.ending;

   };

 },

}; // Create a Vue.js application and use the plugin
import { createApp } from 'vue';
import App from './App.vue';
import DisplayPlugin from './displayPlugin';

const app = createApp(App);

// Use the plugin with options for the greeting and ending strings
app.use(DisplayPlugin, { greeting: 'Welcome to, ', geekstogeeks: '!' });

app.mount('#app'); // Define a Vue.js component that uses the global method to display a greeting message
<script setup>
import { ref, onMounted, getCurrentInstance } from 'vue'

const name = ref('') // Define a data property for the name
const inputName = ref('') // Define a data property for the input name

onMounted(() => {
 // Call the global method when the component is mounted
 // Pass the input name as an argument to the method
 const instance = getCurrentInstance()
 instance?.appContext.config.globalProperties.$displayName(instance, inputName.value)
})
</script>

<template>
 <div>
   <input type="text" v-model="inputName" placeholder="Enter your name">
   <h1>{{ name }}!</h1>
 </div>
</template> Output: A Simple Modal Example In this example, we will explore how to create a custom plugin by creating a simple modal. Step 1 Create a new file myModal.vue to hold the modal functionalities //Create the modal component. 
<template>
  <transition name="modal">
    <div class="modal-mask" @click="$emit('close')">
      <div class="modal-wrapper" @click.stop>
        <div class="modal-container">
          <slot></slot>
          <button class="modal-default-button" @click="$emit('close')">Close</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<style scoped>
.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-container {
  background: white;
  padding: 20px;
  border-radius: 10px;
}
</style> Step 2 Create the modal plugin //Create a file modalPlugin.js, to hold your plugin code. 

import MyModal from './MyModal.vue';

export default {
  install: (app) => {
    app.component('my-modal', MyModal);
  },
}; Step 3 Use the Plugin in your Application Javascript//In your main.js file, import the plugin and then apply it to your Vue app. 
import { createApp } from 'vue';
import App from './App.vue';
import modalPlugin from './modalPlugin';

const app = createApp(App);

app.use(modalPlugin);

app.mount('#app'); Step 4 Use the modal in your component Javascript//You can now use the my-modal component in any Vue component. 
<template>
  <div>
    <button @click="showModal = true">Show Modal</button>
    <my-modal v-if="showModal" @close="showModal = false">
      <h1>Successful!</h1>
      <p>You clicked the button.</p>
    </my-modal>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showModal: false,
    };
  },
};
</script> Conclusion We have looked at what Vue plugins are and their importance in the development process of applications. How their attributes can be beneficial for developers in the building of dynamic and interactive interfaces. Also, we delve into how to create our own required plugins for our apps or choose a suitable one from third-party plugins. Understanding how to integrate plugins into our app not only makes our work easier as developers but also brings about good practice. Further reading. More examples

Vue.js Plugins: What Are They, Their Benefits, and How to Integrate Them

It is a trap! We got your focus and will not let him out! These words you must hear every time you have opened a modal dialog. But you wont… Modal dialog , or are an UI trick to let you do something “single” — upload a file, provide an URL, “Are you sure”, “Click a button to win $$$” and so on. Modal dialog Lightbox Focused task Usually, you shall not, and cannot not, do anything else — you are able to perform any actions only inside hightlited modal. This is true to native modals, but not usually true for DOM implementations. “Design” But, if you want to stylish your page, and your dialogs — you have to implement “modals” using the DOM API, HTML and CSS. And to do it? Cover the entire page with a shadow. Place a dialog(window, lightbox or task) above it. Simple and Usable. And here our story starts… This is screen shot from — a quite usable modal library, which will cover the one unusual thing. react-aria-modal demo Normally you cant click at elements “outside” — they are covered by shadow. “Tab-out” from a modal. But you can In this case — modal is not very “modal”. React-aria-modal is it by using . fixing react-focus-trap Best practices MDN has a perfect article about building accesseble dialog boxes. It explain WHAT YOU have to do, but not explaining — HOW. _The dialog role is used to mark up a DHTML based application dialog or window that separates content or UI from the…_developer.mozilla.org Using the dialog role In short: you have to manage keyboard focus. And next they describe how. — is a perfect solution. It passes all the tests. jQuery UI dialog But where to get a good component in React/Vue/Angular/non-jQuery world? ? No focus management. http://www.material-ui.com/#/components/dialog — Nope. https://semantic-ui.com/modules/modal.html — Nope https://react.semantic-ui.com/modules/modal — Nope https://atlaskit.atlassian.com/components/modal-dialog — Nope. https://rambler-digital-solutions.github.io/rambler-ui/#/components/Popup?_k=vs348d — 🤷‍♂ https://ant.design/components/modal/ — 🤷‍♂ http://blueprintjs.com/docs/#core/components/dialog ….this list is infinite…. is quite strange — it handles change focus by Tab, but allows to leave a Modal by Shift+Tab. Ant works well, but will return focus only to autofocus element, or first element with tabIndex. Otherwise — will not. BluePrint.js They just are using improper way to manage a focus. The is NO ideal solution. Hooray! PS: Except jQuery. It just works. Focus trap Just to recall — I’v mention the library. It can show a Modal. ! And it uses react-focus-trap to manage focus. react-aria-modal Correctly react-focus-trap is a simple React component, which will not let your leave a boundaries of . Focus Modal But then I checked the sources — I’v found that it is . not a trap That’s A Trap. I found . And emulation is the worse thing you can do. only emulation How react-focus-trap works. It will attach global keyboard event listeners. On “Tab” it will collect all* tabbable elements and manually move focus from one to another. By doing this it will control focus, and that is a goal. But all* is not all. does not include area elements, for example. And you should not emulate the browser bahevior. Tabbles How to do it in a better way? How to lock a Focus There is 3.5 good ways to do it. The best way Move all elements from body into div with tabIndex=-1. By tabindex is not working for chilren, so you might set negative tabIndex to all the elements with a script, or just set , a new html property to disable inteactions with a whole DOM-tree… which is not supported anywhere, yet (but you can use polifills). inert By the time you can set pointer-events: none, and disable user-select on top node. Just to be sure. Move modal out of that div and gave a positive tabIndex. And least but not least — you should set aria-hidden to the Div, to not let the screen reader to read anything outside the modal of the modal to prevent accidentally escaping. And on “everything” to achieve it. Screen readers should also be trapped inside aria-hidden is the only way This is native browser behavior, and anything except Modal will be untabbale in a real. PS: Not everything — you still can tab-out from a page. May be you want it? _On my current project we have some modal panes that open up on certain actions. I am trying to get it so that when that…_stackoverflow.com Keep tabbing within modal pane only The smart way Just attach a handle to a last(and first) element, and handle Tab only on the “edges” $(':tabbale:last').on('keydown', function (e) {     if ($("this:focus") && (e.which == 9)) {        e.preventDefault();        $(':input:first').focus();    }}); It will work, it will preserve browser behavior “between” edges… but will . ignore tabIndex and element modifications This is better that “whole” emulation, but you should ignore this way. The right way The right way is not to emulate Tab, but to just not let him out. Not let the focus out. focus-trap-react is emulation, but (a different one!) is not. react-focus-trap According to react-focus-trap the sources attaches a global listener to “focus” event. Then something got focus it will check WHO. If focus is outside modal — it will be returned to the element. first This solution is very close to the ideal, but it will always return a focus to the first element, and have no idea about tabIndex. But anyway — this is the right way. Let the focus do anything inside modal, just lock it. The Focus Lock That means — if no good solution exists — it is time to create a new solution. Lock and loaded… First I planned to write an article about KISS principle, and explain the meaning of it by comparing react-focus-trap with . But now I am unsure — it is will KISS-friendly or not.. react-focus-lock But, to say the truth — this is not Focus Trap. And even not Focus-Lock. This is Focus Jail, or Focus Wall. Focus is free inside, it just cant pass the Border Security (and Jon Snow) React-focus-lock React-focus-lock, the solution I’v build and I am going to talk about uses the last and not the best way to detect the focus change — onBlur/FocusOut event. It is not as handy as FocusIn event, as long node will first lose focus, and then new component will get it — so you have to wait before check. But.. FocusOut is internal event, as long FocusIn is external. If you can listen only on your own node — you should no it. TabIndex and the Prisoner of Azkaban But the trickiest thing is to handle tabIndex _without_ emulation tabIndex. I did not found any existing solution except focus-trap-react, which is not a solution, and yet again have to build my own. Algorithm is simple: 1. Remember the last focused item.2. On focusOut: find common parent of modal and document.activeElement get all tabbable element inside common parent. get all elements inside the Modal3. Find the difference between last focused item and current.4. If diff(current-active)>1 -> return focus to the last node.5. If current < first node -> go to the last-by-order6. If current > last node -> go to the first-by-order7. If first < current < last -> move cursor to the nearest-in-dirrection tabbable The most tricky one is #7. If you use tabIndex(dont do it!) you can have: Focus outside Modal Focus inside Modal Focus outside Modal Yet again inside.. Neat :) Most of realizations does ignore tabIndex at all :) inert Conclusion Anyway, I’v spent few hours on weekends and create a quite usable components, which can help you to lock the Pandora Box you might have. Usage is simple: <FocusLock disabled={disabled}> Something inside </FocusLock> And you can use it for React(as ), or for Vue(as ). And get a good experience in both cases. react-focus-lock vue-focus-lock Here is the demo: (lock is , or it will steal ANY focus, forcing you to close browser tab :P) disabled by default Just wrap your modal with simple component, and you will become more WAI-ARIA compatible. PS: And you will also get auto-focus out of the box :) After a year of development *-Focus-lock could lock anything anywhere, supports “focus groups”, autodetects React 16 Portals, and provides some extra helper component for your service. It is still the “best” focus-locking library, based on the “right” principles. PS! You still have to hide “everything else” with aria-hidden. Lock can’t do it for you — it is not it’s job. You also have to wrap focus trap with element with , and yet again you have to do it by yourself. role=’dialog’ You have to make everything except you modal in-accessible. Un-reachable. Inert. How to do it? block everything except the Modal, using a “shadow”, “lightbox” or experimental HTML attribute. Or (or Dom-Locky) to just disable all iterations with the rest of the page. inert React-Locky wrap everything except modal with to “hide it”. aria-hidden A good article you should read about building accessible dialogs from Google IO: _As the sites we build increasingly become more app-like it's important that the platform keep up and give component…_robdodson.me Building better accessibility primitives So this is React-Aria, the modals that “just works”. _A demo of react-aria-modal_davidtheclark.github.io react-aria-modal demo Links You just read an artile about React-focus-lock, a jail for your focus. This is Component with Single Responsibility, to help you “fix” your modals _react-focus-lock - It is a trap! A lock for a Focus._github.com theKashey/react-focus-lock And this one is for Vue.js (10 lines of code, sweet!) _vue-focus-lock - It is a trap! A lock for a Focus._github.com theKashey/vue-focus-lock PS: And dont forget about pure vanilla . Which will use focusIn event :) dom-focus-lock And don’t forget about another part of good modals — event isolation, and preventing body from scrolling, while modal is being opened. _So, JFYI, you just scrolled a page down to this place. You were able to do it. The problem is – sometimes you should…_hackernoon.com How to train a your Scroll _First of all — WHY one have to fight the scroll?_medium.com How to fight the <body> scroll

It’s a (focus) Trap!

Authors:
(1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group;
(2) Jin Xu, Alibaba Group, Equal contribution;
(3) Wenrui Liu, Zhejiang University;
(4) Yunfei Chu, Alibaba Group;
(5) Xiaohuan Zhou, Alibaba Group;
(6) Yichong Leng, Alibaba Group;
(7) Yuanjun Lv, Alibaba Group;
(8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn);
(9) Yichong Leng, Zhejiang University
(10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com);
(11) Jingren Zhou, Alibaba Group. Table of Links Abstract and 1. Introduction 2 Related Work 3 AIR-Bench and 3.1 Overview 3.2 Foundation Benchmark 3.3 Chat Benchmark 3.4 Evaluation Strategy 4 Experiments 4.1 Models 4.2 Main Results 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 5 Conclusion and References A Detailed Results of Foundation Benchmark 4.1 Models We evaluate the performance of various LALMs with instruction-following capabilities. These models are either open-sourced or accessible through public APIs, such as SpeechGPT (Zhang et al., 2023), BLSP (Wang et al., 2023a), SALMONN (Tang et al., 2023a), Qwen-AudioChat (Chu et al., 2023), and Qwen-Audio Turbo [3]. Additionally, we consider large multi-modality models with audio understanding abilities like PandaGPT (Su et al., 2023), Macaw-LLM (Lyu et al., 2023), and NExT-GPT (Wu et al., 2023b). Besides, we also incorporate a concatenative approach comprising Whisper-large-v2 (Radford et al., 2023) and GPT-4 Turbo (OpenAI, 2023) for tasks related to speech as a baseline. We evaluate the performance of all these models on both funda mental and chat benchmarks, utilizing their latest publicly available checkpoints. In cases of multiple checkpoints, we select the model with the largest parameter size. For all models, we directly follow their default decoding strategies for evaluation. This paper is available on arxiv under CC BY 4.0 DEED license. [3] https://help.aliyun.com/zh/dashscope/developerreference/qwen-audio-api Authors: (1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group; (2) Jin Xu, Alibaba Group, Equal contribution; (3) Wenrui Liu, Zhejiang University; (4) Yunfei Chu, Alibaba Group; (5) Xiaohuan Zhou, Alibaba Group; (6) Yichong Leng, Alibaba Group; (7) Yuanjun Lv, Alibaba Group; (8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn); (9) Yichong Leng, Zhejiang University (10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com); (11) Jingren Zhou, Alibaba Group. Authors: Authors: (1) Qian Yang, Zhejiang University, Equal contribution. This work was conducted during Qian Yang’s internship at Alibaba Group; (2) Jin Xu, Alibaba Group, Equal contribution; (3) Wenrui Liu, Zhejiang University; (4) Yunfei Chu, Alibaba Group; (5) Xiaohuan Zhou, Alibaba Group; (6) Yichong Leng, Alibaba Group; (7) Yuanjun Lv, Alibaba Group; (8) Zhou Zhao, Alibaba Group and Corresponding to Zhou Zhao (zhaozhou@zju.edu.cn); (9) Yichong Leng, Zhejiang University (10) Chang Zhou, Alibaba Group and Corresponding to Chang Zhou (ericzhou.zc@alibaba-inc.com); (11) Jingren Zhou, Alibaba Group. Table of Links Abstract and 1. Introduction Abstract and 1. Introduction 2 Related Work 2 Related Work 3 AIR-Bench and 3.1 Overview 3 AIR-Bench and 3.1 Overview 3.2 Foundation Benchmark 3.2 Foundation Benchmark 3.3 Chat Benchmark 3.3 Chat Benchmark 3.4 Evaluation Strategy 3.4 Evaluation Strategy 4 Experiments 4.1 Models 4.1 Models 4.2 Main Results 4.2 Main Results 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 4.3 Human Evaluation and 4.4 Ablation Study of Positional Bias 5 Conclusion and References 5 Conclusion and References A Detailed Results of Foundation Benchmark A Detailed Results of Foundation Benchmark 4.1 Models We evaluate the performance of various LALMs with instruction-following capabilities. These models are either open-sourced or accessible through public APIs, such as SpeechGPT (Zhang et al., 2023), BLSP (Wang et al., 2023a), SALMONN (Tang et al., 2023a), Qwen-AudioChat (Chu et al., 2023), and Qwen-Audio Turbo [3]. Additionally, we consider large multi-modality models with audio understanding abilities like PandaGPT (Su et al., 2023), Macaw-LLM (Lyu et al., 2023), and NExT-GPT (Wu et al., 2023b). Besides, we also incorporate a concatenative approach comprising Whisper-large-v2 (Radford et al., 2023) and GPT-4 Turbo (OpenAI, 2023) for tasks related to speech as a baseline. We evaluate the performance of all these models on both funda mental and chat benchmarks, utilizing their latest publicly available checkpoints. In cases of multiple checkpoints, we select the model with the largest parameter size. For all models, we directly follow their default decoding strategies for evaluation. This paper is available on arxiv under CC BY 4.0 DEED license. This paper is available on arxiv under CC BY 4.0 DEED license. available on arxiv [3] https://help.aliyun.com/zh/dashscope/developerreference/qwen-audio-api

Performance Assessment of LALMs and Multi-Modality Models

Introduction The introduction of the new HTML <dialog> tag is a big change in how we make websites. It changes how we create and handle pop-up boxes in web applications. This article will look into what's good about the <dialog> tag, what it can do, and how to use it, showing why it's important for developers. The Traditional Method: Longer and Difficult ❌ Creating a popup window before used a lot of CSS and JavaScript. Here's an example of how people did it back then: <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> This code snippet shows how complicated it was just to show a simple popup. But still, the backdrop color is missing we need extra effort to show this. The New Way: Simplified With <dialog> ✅ The <dialog> tag is a new part of HTML that makes it easier to create and handle pop-up windows. Here's a basic way to use the <dialog> tag: <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> Features and Methods 1. Showing a Dialog To display a dialog, you can use the show() or showModal() methods: document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); 2. Auto-Open Dialog The open attribute keeps the dialog open from the moment the page loads: <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> Note
When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. 3. Auto Close Button Using the built-in close functionality, no JavaScript is required to close the dialog: <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> Styling the <dialog> Tag Backdrop Styling The <dialog> element includes a special ::backdrop pseudo-element for styling: dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} Main Element Styling Styling the main element is simple and can be adjusted to meet your design requirements. dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} Accessibility Improvements The <dialog> tag automatically follows the official guidelines for being easy to use and accessible. For example, you can close the dialog box by pressing the Escape key. This means there's no need for extra software that might not follow these important rules. Conclusion The new HTML <dialog> tag greatly helps web developers by making it easier to create pop-ups and dialog boxes. It provides ready-to-use features, is easy to handle, and makes websites more accessible and responsive. This makes it a very important tool for modern website building. If you want to learn more about HTML5 tags, check out my blog post: Mastering HTML5: Essential Tips and Tricks for Web Developers See the Pen  https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN Check out the basic functionality in the CodePen demo above to see how it works. If you enjoyed this article, please share it with others. Your support means a lot! Happy Coding 😊 Introduction The introduction of the new HTML <dialog> tag is a big change in how we make websites. It changes how we create and handle pop-up boxes in web applications. <dialog> This article will look into what's good about the <dialog> tag, what it can do, and how to use it, showing why it's important for developers. <dialog> The Traditional Method: Longer and Difficult ❌ Creating a popup window before used a lot of CSS and JavaScript. Here's an example of how people did it back then: <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> <div id="myDialog" class="dialog">
    <p>Dialog content here...</p>
    <button id="closeBtn">Close</button>
</div>


<style>
.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: none; /* Hide the dialog by default */
    /* Additional styling for appearance */
    padding: 20px;
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.dialog.open {
    display: block; /* Show the dialog when 'open' class is added */
}
</style>


<script>
document.addEventListener('DOMContentLoaded', () => {
    const dialog = document.getElementById('myDialog');
    const closeBtn = document.getElementById('closeBtn');
    closeBtn.addEventListener('click', () => {
        dialog.classList.remove('open');
    });
    setTimeout(() => {
        dialog.classList.add('open');
    }, 1000);
});
</script> This code snippet shows how complicated it was just to show a simple popup. But still, the backdrop color is missing we need extra effort to show this. The New Way: Simplified With <dialog> ✅ <dialog> The <dialog> tag is a new part of HTML that makes it easier to create and handle pop-up windows. Here's a basic way to use the <dialog> tag: <dialog> <dialog> <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> <dialog id="myDialog" style="border: none; border-radius: 3px;">
    <p>This is a sample HTML dialog</p>
    <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>


<style>
dialog::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
}
</style> Features and Methods 1. Showing a Dialog To display a dialog, you can use the show() or showModal() methods: show() showModal() document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); document.getElementById('myDialog').show();
// or
document.getElementById('myDialog').showModal(); 2. Auto-Open Dialog The open attribute keeps the dialog open from the moment the page loads: open <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> <dialog id="myDialog" open>
   <p>Auto-open dialog content here...</p>
</dialog> Note When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. Note When you use the open attribute to automatically display a <dialog> element or use javascript show() method to show the dialog, the ::backdrop pseudo-element may not function as expected. Therefore, you need to manually configure the modal backdrop background. <dialog> ::backdrop 3. Auto Close Button Using the built-in close functionality, no JavaScript is required to close the dialog: <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> <dialog id="myDialog">
    <p>Dialog content here...</p>
    <button id="closeBtn" onclick="this.closest('dialog').close()">Close</button>
</dialog> Styling the <dialog> Tag <dialog> Backdrop Styling The <dialog> element includes a special ::backdrop pseudo-element for styling: <dialog> ::backdrop dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} dialog::backdrop {
   background: rgba(0, 0, 0, 0.8);
} Main Element Styling Styling the main element is simple and can be adjusted to meet your design requirements. dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} dialog {
   padding: 20px;
   border-radius: 10px;
   background-color: white;
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
} Accessibility Improvements The <dialog> tag automatically follows the official guidelines for being easy to use and accessible. <dialog> For example, you can close the dialog box by pressing the Escape key. This means there's no need for extra software that might not follow these important rules. Conclusion The new HTML <dialog> tag greatly helps web developers by making it easier to create pop-ups and dialog boxes. <dialog> It provides ready-to-use features, is easy to handle, and makes websites more accessible and responsive. This makes it a very important tool for modern website building. If you want to learn more about HTML5 tags, check out my blog post: Mastering HTML5: Essential Tips and Tricks for Web Developers Mastering HTML5: Essential Tips and Tricks for Web Developers See the Pen https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN https://codepen.io/Thesyntax-Diaries/pen/eYwBwWN Check out the basic functionality in the CodePen demo above to see how it works. If you enjoyed this article, please share it with others. Your support means a lot! Happy Coding 😊

Saying Adios to Custom Modals: Introducing the HTML <dialog> Tag

Building Advanced Video Search: Frame Search Versus Multi-Modal Embeddings

উন্নত ভিডিও অনুসন্ধান তৈরি করা: ফ্রেম অনুসন্ধান বনাম মাল্টি-মোডাল এম্বেডিং

Erstellen einer erweiterten Videosuche: Frame-Suche im Vergleich zu multimodalen Einbettungen

Creación de búsqueda de vídeo avanzada: búsqueda de fotogramas frente a incrustaciones multimodales

Création d'une recherche vidéo avancée : recherche de trames et intégrations multimodales

उन्नत वीडियो खोज का निर्माण: फ़्रेम खोज बनाम मल्टी-मोडल एम्बेडिंग

高度なビデオ検索の構築: フレーム検索とマルチモーダル埋め込み

고급 비디오 검색 구축: 프레임 검색과 다중 모드 임베딩 비교

Construindo pesquisa avançada de vídeo: pesquisa de quadros versus incorporações multimodais

Создание расширенного поиска видео: поиск кадров в сравнении с мультимодальными встраиваниями

Gelişmiş Video Arama Oluşturma: Çerçeve Aramaya Karşı Çok Modlu Yerleştirmeler

Xây dựng Tìm kiếm video nâng cao: Tìm kiếm khung so với nhúng đa phương thức

构建高级视频搜索：帧搜索与多模态嵌入

When building apps in Angular, you will likely need to trigger a modal or pop-up at some point. Sometimes, this is easy and can be done with some simple CSS, but other times, it may be more complicated. You may need to append markup to the bottom of your document so that it can be placed on top of everything else. Or maybe, depending on the scroll position, a pop-up will need to open upward instead of downward. There are lots of possible scenarios where you may need more than what’s capable with CSS by itself, and that’s where the CDK Overlay Module comes into play. In this post, we’ll look at how we can use the CDK Overlay Module to create a globally positioned modal that’s placed on top of everything else and centered within the viewport. And to contrast, we’ll create a pop-up connected to a button that will automatically position itself within the viewport based on scroll position. Alright, let’s get to it! https://youtu.be/S7d2zvbFKhs?embedable=true The Angular CDK Overlay module is really powerful and provides many features. And this means there’s a lot to know and understand. The aim of this post is to demonstrate a basic setup for two common types of overlays, modals, and pop-ups. Since there’s so much to cover within the Overlay module, I will be creating posts of more advanced Overlay module features in the future, so keep an eye out for those. For now, though, let’s start with a basic modal example. Creating a Modal With the Angular CDK Overlay Service Here, we have this list of NBA players. We have this button in the upper right corner of each player. When we click this button, we want to open up a modal to display more information about the specific player. This is something that is fairly easy to do using the CDK Overlay module. How to install the Angular CDK But, before we can use it, we first need to install the Angular CDK, which we can do with this command within our Angular app: npm i @angular/cdk How to import the Angular CDK Overlay prebuilt CSS After we have it installed, we will want to include the overlay-prebuilt CSS file from the library. It provides some basic styles in order to create modals and pop-ups that work correctly. I normally include it in something like the global stylesheet for the Angular app, so let’s import it there. global_styles.scss @import '@angular/cdk/overlay-prebuilt.css'; Ok, now we’re ready to wire up our modal. The first thing we need to do is inject the Overlay service into our constructor so that we can use it. player.component.ts export class PlayerComponent {
    ...
    constructor(private overlay: Overlay) {}
} Now, let’s create an method that we’ll call at the click of a button. Within this method, first, we’ll create our overlay using the method from the service. This method will create an overlay and return the reference to it, so we’ll set it as a variable named overlayRef since that’s what we will have after calling . openModal() create() create() export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
    }
} Ok, at this point we’ve created it, now we need to attach some markup to the overlay. So, we’ll use our overlayRef variable, and we’ll call the method. This method has a parameter where we need to pass a . attach() CdkPortal export class PlayerComponent {
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach();
    }
} This template portal will need to wrap whatever markup we want to display in our modal. Before we can add this portal, we first need to import it into the Portal Module. ...
import { PortalModule } from '@angular/cdk/portal';

@Component({
    selector: 'app-player',
    imports: [..., PortalModule]
    ...
} Ok, now we can switch over to our component template. We’ll add an . On this we’ll add the directive. And within this let’s add our player details component. This component has an input where it takes in a player object, so we’ll pass it to our current player. ng-template ng-template cdkPortal ng-template player.component.html <ng-template cdkPortal>
    <app-player-details [player]="player"></app-player-details>
</ng-template> Now, we also need to import this player component, so let’s do that real quick. player.component.ts ...
import { PlayerDetailsComponent } from './player-details/player-details.component';

@Component({
  selector: 'app-player',
  imports: [..., PlayerDetailsComponent]
  ...
}) Ok, the next thing we need to do is access the portal that we just added in the template so that we can pass it to our attach method. We can do this using the Angular View Child decorator. And for the , its selector will be the . We’ll call this property , and we’ll type it to as well. @ViewChild CdkPortal portal CdkPortal import { CdkPortal, PortalModule } from '@angular/cdk/portal';

export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
} Now that we have a handle on the portal, we can simply add it to our attach method. export class PlayerComponent {
    @ViewChild(CdkPortal) portal!: CdkPortal;
    ...
    protected openModal() {
        const overlayRef = this.overlay.create();
        overlayRef.attach(this.portal);
    }
} And the last thing we need to do is call this open modal method when the button is clicked. So, back in our component template, on the button, we bind to the click event, and then we call our method. player.component.html <button (click)="openModal()">
    ...
</button> Ok, now let’s click our button and take a look. And there it is, the click opens the modal with our player details. So, this is pretty cool, but at first glance, this may not seem like anything special, but let me tell you, it actually is. If we inspect the modal, we can see that the markup for our player details is actually getting injected into a container at the end of the . This is pretty crazy since our player component is up above within the app component. body This is what ensures that this modal will properly be placed on a layer that is unaffected by anything else within our app. And that can be really handy in many modal situations. How to Customize the Angular Overlay Settings With a Custom Overlay Config Object Now, as I mentioned earlier, there’s a lot of functionality and configuration available with the Overlay Module. For example, if we want to position our model in the center of the viewport, We can do this by passing a custom configuration object to the overlay. To do this, let’s create a variable. This will be set to a new object. We’ll need to make sure that class is imported. Within this, we’re going to set the for the overlay. config OverlayConfig positionStrategy We’ll add , and then we’ll call the method. It’s going to be a position, which just means that it will be positioned relative to the viewport and not any specific element. From there, we’ll call , and then . this.overlay position() global() centerHorizontally() centerVertically() Let’s also set a width of sixty percent to keep it from growing too wide. Then, we can pass this custom config in our create method. The items we’ve included in this custom config will now override the default values for those properties. ...
import { ..., OverlayConfig } from '@angular/cdk/overlay';

export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            positionStrategy: this.overlay.position().global().centerHorizontally().centerVertically(),
            width: '60%'
        });
        const overlayRef = this.overlay.create(config);
        overlayRef.attach(this.portal);
    }
} Ok, let’s check it out. Looking pretty good right? How to Close an Angular CDK Overlay on a Backdrop Click Now, what if we want to put up a layer over the viewport when the modal is open, and when we click on that layer, we want to close the modal? Well, we can do this by adding more custom configurations in our . We can add true. This will add a backdrop element to our overlay. OverlayConfig hasBackdrop Now, to close the modal when this backdrop gets clicked, we have a method on our overlay ref that we can call. This method returns an observable that will fire every time the backdrop is clicked as long as it is open, so we can subscribe. Then, in the callback here, we will close our overlay by calling . backdropClick() overlayRef.detach() ...
export class PlayerComponent {
    ...
    protected openModal() {
        const config = new OverlayConfig({
            ...
            hasBackdrop: true
        });
        ...
        overlayRef.backdropClick().subscribe(() => overlayRef.detach());
    }
} Now, let’s try this. Cool, it closes when we click on this backdrop. Now, there’s a ton more available to us here, so I’ll save it for a future post. Just know that there’s quite a bit more functionality and configuration available to you if needed. For now, let’s look at an example of a Connected Position overlay. Creating a Pop-up With a Connected Position Angular CDK Overlay Creating a “connected position” overlay means that our pop-up, instead of being globally positioned within the viewport, will be positioned relative to the button that we clicked on to open it. As if it’s attached to it. For this, we can use a couple of directives provided by the Overlay module instead of using the Overlay service. We’ll use the directive, which will be applied to the item that we want to position from, in our case, our button. And then, we’ll use the directive that will be applied to the that we want to inject into our popup. cdkOverlayOrigin cdkConnectedOverlay ng-template For this example, since we’ll be using these directives, we can actually remove most of what we added when we were using the Overlay service. Well, get rid of the , the constructor, and the function. We can also remove the , , , and imports as well. @ViewChild openModal() PortalModule CdkPortal Overlay Overlay Config Now, within the component template, we can replace the click binding on our button with the directive. cdkOverlayOrigin <button cdkOverlayOrigin>
    ...
</button> On the overlay , we can replace the directive with the directive. ng-template cdkPortal cdkConnectedOverlay <ng-template cdkConnectedOverlay>
    ...
</ng-template> Now, we need to connect the overlay to the origin. To do this, the overlay has an input called . We need to pass this input to our origin directive instance. So we add a template reference variable, let’s call it trigger, on our origin button. cdkConnectedOverlayOrigin <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin">
    ...
</button> Now, we can pass this reference to the overlay with the input. cdkConnectedOverlayOrigin <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger">
    ...
</ng-template> To make this pop-up open, we’ll use the input. This input expects a boolean value telling it whether it should be open or not. So, let’s add a property called , and initialize it to false. cdkConnectedOverlayOpen detailsOpen ...
export class PlayerComponent {
    protected detailsOpen = false;
} We’ll toggle the property when the button is clicked using a click event binding. <button
    cdkOverlayOrigin
    #trigger="cdkOverlayOrigin"
    (click)="detailsOpen = !detailsOpen">
    ...
</button> Then, we can bind our input to this property on the overlay. cdkConnectedOverlayOpen <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen">
    ...
</ng-template> Ok, let’s give this a try. Cool, now it gets positioned next to the button. And, if we inspect this again, the markup gets injected in the same location, at the end of the body. What’s even more cool is that on the item at the bottom of the viewport, we will want it to open upward because we don’t have room to see it if it opens downward. Well, if we click on the button, we can see that this actually happens without us doing anything at all. Super cool. This really saves us a ton of effort. All the tough stuff has already been figured out for us. And just like the global positioning method, when using the Overlay service, there are a bunch of configurations available to us. This time, with the directives, however, we use s and s. @Input @Output So, if we want to add the width, for example, we can use the input. cdkConnectedOverlayWidth <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%">
    ...
</ng-template> Now, the pop-up won’t grow beyond sixty percent of the width of its container. And if we want to close this pop-up when we click anywhere outside, we can use the output, which will fire when it detects a click outside of itself. When this happens, we can set our details open property to false. overlayOutsideClick <ng-template
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    [cdkConnectedOverlayOpen]="detailsOpen"
    cdkConnectedOverlayWidth="60%"
    (overlayOutsideClick)="detailsOpen = false">
    ...
</ng-template> Now, when we open our pop-up and then click outside, it closes. Just like with the Overlay service, there’s a ton more available to us, which I’ll save for a future post. Just remember that there’s more functionality and configuration available outside of what I’ve covered here. So, some pretty cool stuff is happening in these examples. It’s all actually quite complex from a development perspective, but there’s not much for us to figure out in order to leverage it, thanks to the folks who built it. Found This Helpful? If you found this article helpful and want to show some love, you can always buy me a coffee! Want to See It in Action? Check out the demo code and examples of these techniques in the Stackblitz example below. If you have any questions or thoughts, don’t hesitate to leave a comment. https://stackblitz.com/edit/stackblitz-starters-hnqgln?ctl=1&embed=1&file=src%2Fplayer%2Fplayer.component.ts&embedable=true Also published . here

Learn the Basics of Angular CDK Overlay: Angular Modals and Pop-ups

Every application is built from the same type of components - buttons, inputs, dropdowns, etc., and modal windows are in this list. The reason is simple - modal windows allow us to communicate with a user and do not overwhelm a UI with additional information until it becomes needed. In this article, I will explore one of the approaches to managing modal windows in apps. Angular We use the primeng library for modals in the article's examples. Your case can be different. The general idea will be the same despite the libraries, but API can be different; be aware of it. Modal windows are just regular components - they have markup, style, and selector. But in contrast to regular components, they usually don't have to be shown on the page immediately. We need them only for the result of users' actions - confirm, discard, fill a form, etc. That's why we won't include them in our build - we will download them dynamically only if we require them. Let's see an example: public openModal(): void {
    const modalComponent = async (): Promise<any> => import('./path-to-your-modal');
    this.modalService.open(modalComponent());
} Here, we have the dynamic import approach. It means that our component will be loaded when we invoke the method. It's quite useful because we don't load the modal immediately in our chunk - only when the user needs it. This approach can help you to slightly reduce the bundle size, especially if your modals are full of logic and components. openModal In general, this is the working solution. But we can go further. Let's make a service that will handle the dynamic imports and return an instance of the modal: import { Injectable } from '@angular/core';
import { DialogService } from 'primeng/dynamicdialog';

@Injectable({ providedIn: 'root' })
export class CustomModalService {
    public modalWindowComponents: { [key: string]: () => Promise<any> } = {
        ConfirmModalComponent: () =>
            import('your-path/to-component').then((component) => component.ConfirmModalComponent),
    };

constructor(private modalService: DialogService) {}

    public async openDynamicDialogModal({
        componentName,
        data,
    }: {
        componentName: string;
        data?: { [key: string]: any };
    }): Promise<any> {
        const modalComponent = this.modalService.open(await this.modalWindowComponents[componentName](), { ...data });

        modalComponent.onClose.subscribe(() => {
            // some logic
        });
        return modalComponent;
    }
} Here, we can see several important things: We use an object to store modal windows imports where the key is the component name, and the value is an import function that returns Promise; Our method is taking the params object with the component's name (to take the import function from the object) and some additional data, which contains whatever you want for a component or its appearing configuration. Also, we have a subscription for close events. It is more convenient to handle window closing in one place; We return a Promise with the imported component. It allows us to handle the logic for each modal. Here is an example of the usage of this service: public async handleOpeningModalWindow(): Promise<void> {
    const dialogRef = await this.primengModalService.openDynamicDialogModal({
        componentName: 'DeleteStreamModalComponent',
        data: {
           // your params
        },
    });

    dialogRef.onClose
        .pipe(
            // your pipes
        )
        .subscribe(() => {
            // your logic
        });
} Conclusion By adopting the approach outlined above, Angular developers can achieve a leaner, more manageable modal window system. This strategy not only reduces bundle size but also offers a unified method for modal control and customization. Embracing dynamic imports and service-based architecture empowers developers to optimize user experiences while maintaining code scalability and efficiency.

How to Manage Modal Windows in Angular Apps

It's hard to imagine modern Application without pop-up dialogs for confirming addresses, deleting items from a cart, and other such interactions — challenges every developer faces daily. a React The design and management architecture of these dialogs often raises numerous questions. I've encountered everything from complex integration schemes with stores to extensive prop drilling for opening windows, and intricate setups using event emitters. It's time to tackle these issues head-on. In this article, I'll share the solution our team has developed, which significantly aids us in maintaining clean code daily, even as our project scales. Problem Let's take a look at this typical example of how developers usually display models: Boilerplate №1: Managing dialog in an app often involves creating several state variables to control their opening and closing. A typical setup for a component might start with several lines of code like this: const [openConfirm, setOpenConfirm] = useState(false);
const [deleteDialogOpened, setDeleteDialog] = useState(false);
const [editDialogOpened, setEditDialog] = useState(false);
const [moveOnDialogOpened, setMoveOnDialog] = useState(false); Does this code look familiar? Can you imagine the complexity involved in rendering this component, where hundreds of lines of code in JSX track how and when these dialogs open? Managing several dialog windows in this way not only clutters the components but also increases the risk of bugs, as the state of each dialog is intertwined with the overall logic of the component. №2: Performance Imagine you have a table where every cell has its own set of dialog boxes for management tasks. If you put the dialog control logic right inside each cell's component, React ends up doing a lot of work. For every update, it has to check through hundreds of these virtual parts to figure out which dialog boxes to show or hide. This can slow things down because React has to keep comparing all these parts every time something changes. It makes your code more complex and harder to deal with, too. Moving dialogs to a parent level seems straightforward, but the main issue was this: . Ultimately, you end up having to pass data through many layers to reach the dialog windows, which complicates matters. It's like unraveling a knot that only gets tighter the more you pull on it. prop drilling №3: Package size In large projects with numerous dialogs, a problem arises: many dialogs are loaded but never used by some users. Without code splitting, other forms of preloading/caching, or similar strategies, the application can become sluggish, loading unnecessary items. Solutions We often see two main types of dialogs in apps. First, there are the common ones, used about 90% of the time, like confirmation messages, map location pickers, ads, or subscription offers. These dialogs pop up frequently, look similar, and aren't tied to any specific part of the app. Then, there's the other 10%: specialized dialogs made for one-time events or specific actions. By figuring out which dialogs are used most and which are for special occasions, we can make managing and loading them much easier. Modal Manager My idea is to create a single entry point for all dialogs, allowing us to manage them as conveniently as routes in React applications. This means we will describe their behavior strategy, share data, and invoke them using hooks and React context. By leveraging Suspense, we can ensure that these dialogs are not loaded unnecessarily. This approach streamlines dialog management, making it more efficient and less prone to performance issues. By centralizing dialog control, we can easily adjust their behavior and appearance across the entire application, improving consistency and user experience. Additionally, using Suspense for lazy loading helps keep our app lightweight, loading resources only when they are truly needed. Let’s do it: import { lazy } from 'react'

export enum Modals {
ConfirmModal,
SubscriptionModal,
}

export const DialogManager = {
[Modals.ConfirmModal]: lazy(() => import('./modals/ConfirmModal')),
[Modals.SubscriptionModal]: lazy(
() => import('@components/common/Subscriptions')
),
} The - just a simple hashmap, where each dialog is associated with a unique key and contains a lazy component of the dialog. DialogManager Provider As I mentioned before context and provider - it’s an approach to initialize our dialogs and share value in any place, let’s make it: type DialogStructure = {
id: string
component: () => JSX.Element
}

export type DialogCloseHandler<T = boolean> = {
onCloseHandler?: (value?: T) => T
}

const useDialogProvider = () => {
const [activeDialogs, setActiveDialogs] = useState<Array<DialogStructure>>([])

const close = useCallback(
(id: string, value?: unknown) => {
setActiveDialogs(activeDialogs.filter(dialog => dialog.id !== id))

 return value
},
[activeDialogs]

const open = useCallback(
<T extends Modals>(
type: T,
props: Omit<ComponentProps<(typeof dialogManager)[T]>, 'onCloseHandler'>
) => {
const id = nanoid()
const Component = dialogManager[type as Modals]

  setActiveDialogs([
    {
      id,
      component: () => (
        <Component {...props} onCloseHandler={value => close(id, value)} />
      ),
    },
    ...activeDialogs,
  ])

  return null
},
[activeDialogs, close]

)

return useMemo(
() => ({ open, close, activeDialogs }),
[open, close, activeDialogs]
)
}

export const DialogContext = createContext<
ReturnType<typeof useDialogProvider> | undefined Let's delve deeper into our methodology: In the state, we accumulate our dialogs. This is an array because we anticipate that multiple dialogs might be called one after another. activeDialogs is what's passed as a value to our . It's crucial that it returns both an opening function and a closing function, as well as a list of all dialogs. useDialogProvider DialogContext The function is generic, thanks to , it knows the props our dialog accepts. This will be incredibly useful for invoking our dialogs in the future. open <ComponentProps<(typeof dialogManager)[T]> - simply deletes our component from close activeDialogs is one of the key tricks of our architecture. The only thing our manager-created dialog needs to know is how to close itself. There are numerous ways to teach it this, but the simplest method seems to be incorporating a callback into each of the dialogs invoked by our system that can perform this action. onCloseHandler Context and suspense part Now, let's focus on our context setup: export const DialogProvider: FC<PropsWithChildren> = ({ children }) => {
const value = useDialogProvider()

return (
<DialogContext.Provider value={value}>
{children}
{typeof window !== 'undefined' && value.activeDialogs.length ? (
<Suspense fallback={null}>
{value.activeDialogs.map(({ id, component: LazyDialog }) => (
<LazyDialog key={id} />
))}
</Suspense>
) : null}
</DialogContext.Provider>
)
} Remember how we opted for wrapping for our dialogs within the manager to facilitate on-demand loading? By incorporating in our provider, we streamline this process even further. Now, iterating through any open dialogs in our provider becomes straightforward, ensuring that dialogs are loaded efficiently and only when necessary, enhancing the overall performance and user experience of our application. lazy Suspense Hook useDialog This is the final piece of our entire splendid structure. Now, we need to learn how to conveniently invoke our dialogs from anywhere within our application. I suggest doing this with the hook, as all the necessary functionality for it is already in place: useDialog export const useDialog = () => {
const context = useContext(DialogContext)

if (context === undefined) {
throw new Error('useDialog() called outside of DialogProvider')
}

return context
} That's it. Now, in any component, we can simply call: const {open} = useDialog()

return (
<button onClick={() => open(Modals.subscription, { onConfirm: () => location.reload() })}>Buy subscription</button> After we use , our TS and IDE will help us correctly identify the missing props. Therefore, we've added an callback because that's what our subscription dialog component requires. Modals.Subscription onConfirm Finally In essence, this is what we've achieved: All popular or frequently used popups are extracted and described in a special manager. If you prefer not to use this approach for some dialogs, you can still do it the old way, and everything will work just fine. A Clearly Defined Dialog Structure: We load our code as needed using lazy loading and Suspense, making our application lighter and faster. Asynchronous Code: Managing the state of our dialogs is now encapsulated within the hook and can be expanded according to the needs of your application. No More Boilerplate: useDialog With these improvements, our application benefits from a more organized, efficient, and scalable dialog management system. This structure not only enhances performance but also simplifies development and maintenance, providing a clear path forward for incorporating dialog windows in a React application.

Mastering Modal Dialogs in React Like a Pro

Using modal dialogs in is fairly common. Whether you want to edit a record in a table without navigating to a different page, look up some data, or just show a warning message to your users, using a modal dialog may be a great user experience. Unfortunately, doing that is not very easy in without a third-party library. It requires writing some non-trivial code and understanding of the internal mechanisms of the Angular framework. That is the reason why we developed a library at Developer Partners for showing modal dialogs in Angular. We are going to use our library in this article. web applications Angular 1. Install the Library We will have to install our library via NPM and include that in our Angular modules to be able to use it. Here is the NPM command to install it: @developer-partners/ngx-modal-dialo g npm install @developer-partners/ngx-modal-dialog Next, we have to include it in the Angular modules where we have to use modal dialogs. Our demo application is very small, it has only one module called AppModule. We have to include ModalModule from the library in the imports array of our AppModule Angular module: We are all set. We can start using the modal dialog component in our application. 2. Show a Modal Dialog As mentioned before, we are going to show our modal dialog when we want to add or edit a book in our list of books. Let's first create a component where we are going to show the list of books. We are going to create a new Angular component and call it . BookListComponent This is the content of the Typescript class: BookListComponent Our class uses a hardcoded list of books as the data to show in our table for simplicity. It also needs the Angular service from the ngx-modal-dialog library to be able to show the modal dialogs that is why we injected it into our constructor. BookListComponent ModalService Next, we will create the HTML file for where we will show the list of books in an HTML table: BookListComponent The HTML code above is pretty simple. It show the list of books in a table. It also has a button called "Add New Book". This is what the UI looks like so far: When the "Add New Book" button is clicked, it calls the function in our Typescript class. The function shows the modal dialog for adding a new book to our table. This is the Typescript code of the function: createBook createBook createBook The function shows the modal dialog by calling the function of the class. The function takes 2 parameters: the class of the Angular component to show inside the modal dialog and the options of modal dialog which are the settings of the dialog such as the title, size, position, and a few other things. The modal dialog needs an Angular component to show in its body. Without that component, our modal dialog would be just an empty panel overlaying the screen. That component is which is the first parameter of the function in the screenshot above. createBook show ModalService show CreateEditBookComponent show The Angular component is going to be responsible for both adding and editing books. We will start by working on the code for adding new books. Here is the HTML code of the CreateEditBookComponent which has only a few fields for entering the ID and title of the book we want to create and has buttons for closing the dialog and saving the data: CreateEditBookComponent This is what the modal dialog UI looks like: Here is the Typescript code of the CreateEditBookComponent component: The component uses an Angular service called from the library. We use that service for interacting with the modal dialog where our component is placed such as closing the modal or subscribing to its events. We simply close the modal dialog in the function in the screenshot above. We call the function when the "Cancel" button from HTML is clicked. When we click the "Save" button in the HTML code, it submits the form which calls the function. In the function, we close the modal dialog just like in the function but we also pass the property to it that contains the data for adding a new book to our list. CreateEditBookComponent ModalReference ngx-modal-dialog cancel cancel saveData saveData cancel book The service is a generic type. When we call the function of the service, we have to pass an object of the same type as its generic parameter. In our case, it's a Typescript interface called . The parameter that we pass to the function is passed back to the component that created the modal dialog by calling the function of the class. ModalReference closeSuccess ModalReference Book closeSuccess show ModalService When the call the closeSuccess function of the ModalReference service, it closes the modal dialog and triggers an RxJS event passing the newly create book to the subscribers of that event. In the screenshot above, the parameter of our callback function is the newly created book that we received from the modal dialog, so we simply add it to our array to show it in the UI. newBook books 3. Passing Data to Modal Dialogs There are some cases where you need to pass some data to modal dialogs. For example, if we want to edit a book from the list, we can pass the book record that we want to edit to the modal dialog to have the initial data that we want to modify. Let's start by adding a button to the table rows for editing the row data: This is what the UI looks like with the Edit button in each row of the table: The function has almost the same code as the function with just one important difference. It passes the book that we want to edit to the modal dialog by using the property of the of the dialog options. editBook createBook model The parameter that we pass to the modal dialog using the property becomes available in the service in the component used inside the dialog via its property. model ModalReference config.model In the screenshot above, we are copying the passed parameter and assigning it to the property of the component. The property of object is passed by reference, so any changes we make in the properties of that object will be reflected in the table where we show the list of books. The reason why we copy it is to not modify the row in the table until the user clicks the "Save" button. If the user clicks the "Cancel" button, the table data will not be updated. book CreateEditBookComponent model ModalReference.config This is what the Edit Book modal dialog looks like: Conclusion Building a modal dialog for Angular from scratch is not easy, but it is much easier with our modal dialog library. We went through how to set up the library and use it for showing modal dialogs in your project. We went through most basic use cases and features of the dialogs, but the @developer-partners/ngx-modal-dialog library has a lot of other features that you may find useful in your real projects. Also published here. Please follow the link below to learn more about it: @developer-partners/ngx-modal-dialog In case if you would like to show a nice loading spinner in your modal dialogs, please see our article about building a loading spinner in Angular: How to Create a Loading Spinner in Angular

How to Show a Modal Dialog in Angular

Cómo mostrar un diálogo modal en Angular

Comment afficher une boîte de dialogue modale dans Angular

एंगुलर में एक मॉडल डायलॉग कैसे दिखाएं

Angularでモーダルダイアログを表示する方法

Como mostrar um diálogo modal em Angular

Cách hiển thị hộp thoại phương thức trong góc

如何在 Angular 中显示模态对话框

The Perfect React Modal Implementation for 2023

As a front-end developer, you have probably had to build a modal window on more than one occasion. This type of element differs from the typical pop-ups because it does not appear automatically, instead, the user has to click somewhere on the website (usually a button) to make it appear. In this tutorial, you will learn how to develop and implement a modal component in your React project with TypeScript. It will be reusable in any part of your application, and you will be able to customize it and add any type of content. What Are Modal Windows? Modals are undoubtedly one of the most used components on the web because they can be used in different contexts, from messages to user input. They have placed an overlay on the screen. Therefore, they have visual precedence over all other elements. Like many other components in React, a dependency can be installed to help in this process. However, we always end up limited in several aspects, and one of them is styling. We can create a modal inside or outside the element we call it from in the DOM hierarchy, but to fulfill the definition of a modal, it should be at the same level as the element used as root in React, and to achieve this, we will use the Portals. What Are Portals in React? Portals provide a quick and easy way to render children to a DOM node that exists outside the DOM hierarchy of the parent component. In React, the default behavior is to render the entire application under a single DOM node — the root of the application, but what if we want to render children outside the root DOM node? And you want children to appear visually on top of its container. A Portal can be created using . Here the child is a React element, fragment, or string, and the container is the DOM location (node) to which the portal should be injected. ReactDOM.createPortal(child, container) Below is an example of a modal component created using the above API. const Modal =({ message, isOpen, onClose, children })=> {
if (!isOpen) return null
return ReactDOM.createPortal(
  <div className="modal">
  <span className="message">{message}</span>
  <button onClick={onClose}>Close</button>
  </div>,
  domNode)
} Although a Portal is rendered outside the parent DOM element, it behaves similarly to a normal React component within the application. It can access props and the context API. This is because the Portals reside within the React Tree hierarchy, and Portals only affect the HTML DOM structure and do not impact the React component tree. Developing Modals in React Setting up We create our application with with the following command: vite yarn create vite my-modals-app --template react-ts We install the dependencies that we will need in the project: yarn add styled-components @types/styled-components After that, we create the following structure for the project: src/
├── components/
│   ├── layout/
│   │   ├── Header.tsx
│   │   └── styles.tsx
│   ├── modals/
│   │   ├── Buttons.tsx
│   │   ├── Modal.tsx
│   │   ├── PortalModal.tsx
│   │   ├── index.ts
│   └── └── styles.ts
├── hooks/
│   └── useOnClickOutside.tsx
├── styles/
│   ├── modal.css
│   ├── normalize.css
│   └── theme.ts
├── ts/
│   ├── interfaces/
│   │   └── modal.interface.ts
│   ├── types/
│   └── └── styled.d.ts
├── App.tsx
├── main.tsx
└── config-dummy.ts Components As we can see in the folder structure, we have several functional and styling components for this app, but in order not to make this tutorial long, we will focus only on the main components. : In this component, we have examples of how to use our custom modal. We have buttons that show modals with different configurations to give us an idea of what we can achieve with this modal. App.tsx In this component, we also define the theme for our modal, adding a and creating a global style with of . ThemeProvider createGlobalStyle styled-components import { FC, useState } from "react";
import Header from "./components/layout/Header";
import { Buttons, Modal } from "./components/modals";

import { ThemeProvider } from "styled-components";
import { lightTheme, darkTheme, GlobalStyles } from "./styles/theme";

import * as S from "./components/modals/styles";
import { INITIAL_CONFIG } from "./config-dummy";

import imgModal from "./assets/images/imgModal.jpg";

const App: FC = () => {
  const [theme, setTheme] = useState("dark");
  const [show1, setShow1] = useState < boolean > false;
  const [show2, setShow2] = useState < boolean > false;
  const [show3, setShow3] = useState < boolean > false;
  const [show4, setShow4] = useState < boolean > false;

  const isDarkTheme = theme === "dark";

  return (
    <ThemeProvider theme={isDarkTheme ? darkTheme : lightTheme}>
      <>
        <GlobalStyles />
        <Header isDarkTheme={isDarkTheme} setTheme={setTheme} />
        <main>
          <Buttons
            show1={show1}
            setShow1={setShow1}
            show2={show2}
            setShow2={setShow2}
            show3={show3}
            setShow3={setShow3}
            show4={show4}
            setShow4={setShow4}
          />

          <Modal show={show1} setShow={setShow1} config={INITIAL_CONFIG.modal1}>
            <h1>My Modal 1</h1>
            <p>Reusable Modal with options to customize.</p>

            <S.ModalFooter>
              <S.ModalButtonSecondary onClick={() => setShow1(!show1)}>
                Cancel
              </S.ModalButtonSecondary>
              <S.ModalButtonPrimary>Acept</S.ModalButtonPrimary>
            </S.ModalFooter>
          </Modal>

          <Modal show={show2} setShow={setShow2} config={INITIAL_CONFIG.modal2}>
            <p>Reusable Modal with options to customize.</p>
            <input type="email" placeholder="Email" />
            <S.ModalFooter>
              <S.ModalButtonPrimary>Send</S.ModalButtonPrimary>
            </S.ModalFooter>
          </Modal>

          <Modal show={show3} setShow={setShow3} config={INITIAL_CONFIG.modal3}>
            <img src={imgModal} alt="My Modal" />
          </Modal>

          <Modal show={show4} setShow={setShow4} config={INITIAL_CONFIG.modal4}>
            <h1>My Modal 4</h1>
            <p>Reusable Modal with options to customize.</p>
          </Modal>
        </main>
      </>
    </ThemeProvider>
  );
};

export default App; : This component is conditioned to be displayed or not depending on the action performed by the user. It is wrapped in a style component that is superimposed on the screen. Modal.tsx This component receives as property the configuration that is where we will define how our modal will be seen, that is to say, the position where it will be shown, the title of the modal, paddings, etc. It also receives children, which contains all the content that will be shown inside the modal. It can be any type of content. tsx Also, in this component, we have a couple of functionalities, which serve us to close the modal. : This is a custom hook that will close the modal when it detects that the user clicks outside the modal. useOnClickOutside This hook receives as a parameter the reference of the element that we want to detect and a callback that is the action that we want to make when detecting a click. This hook adds an that will respond to the and event, after this, it will evaluate if the click was inside the element or outside of it. EventListener mousedown touchstart : This is a callback that will be executed when it detects that the user presses the ESC key to close the modal. handleKeyPress It does this by adding an to the event to then evaluate which key was pressed. EventListener keydown import { useCallback, useEffect, useRef } from "react"
import PortalModal from "./PortalModal"

import useOnClickOutside from "../../hooks/useOnClickOutside"

import { ModalConfig } from "../../ts/interfaces/modal.interface"

import * as S from "./styles"
import "../../styles/modal.css"

interface Props {
  show: boolean;
  config: ModalConfig;
  setShow: (value: boolean) => void;
  children: JSX.Element | JSX.Element[];
}

const Modal = ({ children, show, setShow, config }: Props) => {
  const modalRef = useRef < HTMLDivElement > null

  // handle what happens on click outside of modal
  const handleClickOutside = () => setShow(false)

  // handle what happens on key press
  const handleKeyPress = useCallback((event: KeyboardEvent) => {
    if (event.key === "Escape") setShow(false)
  }, [])

  useOnClickOutside(modalRef, handleClickOutside)

  useEffect(() => {
    if (show) {
      // attach the event listener if the modal is shown
      document.addEventListener("keydown", handleKeyPress)
      // remove the event listener
      return () => {
        document.removeEventListener("keydown", handleKeyPress)
      }
    }
  }, [handleKeyPress, show])

  return (
    <>
      {show && (
        <PortalModal wrapperId="modal-portal">
          <S.Overlay
            showOverlay={config.showOverlay}
            positionX={config.positionX}
            positionY={config.positionY}
            show={show}
            style={{
              animationDuration: "400ms",
              animationDelay: "0",
            }}
          >
            <S.ModalContainer padding={config.padding} ref={modalRef}>
              {config.showHeader && (
                <S.ModalHeader>
                  <h3>{config.title}</h3>
                </S.ModalHeader>
              )}

              <S.Close onClick={() => setShow(!show)}>
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16"
                  height="16"
                  fill="currentColor"
                  className="bi bi-x"
                  viewBox="0 0 16 16"
                >
                  <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z" />
                </svg>
              </S.Close>

              <S.Content>{children}</S.Content>
            </S.ModalContainer>
          </S.Overlay>
        </PortalModal>
      )}
    </>
  )
}

export default Modal : This component uses the React Portals, which we have already mentioned previously. PortalModal.tsx It receives children that would be our modal and an id that we will use to assign it to an HTML element. In this component, we use the hook . This hook is a little different from since this one is executed when it detects a change in the virtual DOM and not in the state, which is exactly what we are doing when creating a new element in the DOM. useLayoutEffect useEffect Inside the , we look for and validate if the element has already been created with the id that we have passed, and we set this element. Otherwise, we make a new element in the DOM with the function . useLayoutEffect createWrapperAndAppenToBody With this function, we can create the element where it best suits us. In this case, it is being created at the same level as the root element within the body. Once we have created the element where we are going to insert our modal, we create the portal with . createPortal import { useState, useLayoutEffect } from "react";
import { createPortal } from "react-dom";

interface Props {
  children: JSX.Element;
  wrapperId: string;
}

const PortalModal = ({ children, wrapperId }: Props) => {
  const [portalElement, setPortalElement] =
    (useState < HTMLElement) | (null > null);

  useLayoutEffect(() => {
    let element = document.getElementById(wrapperId) as HTMLElement
    let portalCreated = false;
    // if element is not found with wrapperId or wrapperId is not provided,
    // create and append to body
    if (!element) {
      element = createWrapperAndAppendToBody(wrapperId);
      portalCreated = true;
    }

    setPortalElement(element);

    // cleaning up the portal element
    return () => {
      // delete the programatically created element
      if (portalCreated && element.parentNode) {
        element.parentNode.removeChild(element);
      }
    };
  }, [wrapperId]);

  const createWrapperAndAppendToBody = (elementId: string) => {
    const element = document.createElement("div");
    element.setAttribute("id", elementId);
    document.body.appendChild(element);
    return element;
  };

  // portalElement state will be null on the very first render.
  if (!portalElement) return null;

  return createPortal(children, portalElement);
};

export default PortalModal; : This is the file we will use as a template to generate different modals, in this case, 4. configDummy.ts As you can see, you can make a lot of combinations to generate a modal different from each other, and you could add more configurations if you wish. import {
  ModalConfigDummy,
  ModalPositionX,
  ModalPositionY,
} from "./ts/interfaces/modal.interface";

export const INITIAL_CONFIG: ModalConfigDummy = {
  modal1: {
    title: "Modal Header 1",
    showHeader: true,
    showOverlay: true,
    positionX: ModalPositionX.center,
    positionY: ModalPositionY.center,
    padding: "20px",
  },
  modal2: {
    title: "Modal Header 2",
    showHeader: false,
    showOverlay: true,
    positionX: ModalPositionX.center,
    positionY: ModalPositionY.center,
    padding: "20px",
  },
  modal3: {
    title: "Modal Header 3",
    showHeader: false,
    showOverlay: true,
    positionX: ModalPositionX.left,
    positionY: ModalPositionY.start,
    padding: "0",
  },
  modal4: {
    title: "Modal Header 4",
    showHeader: false,
    showOverlay: true,
    positionX: ModalPositionX.right,
    positionY: ModalPositionY.end,
    padding: "0",
  },
}; That’s it! we have our cool Modal. See the demo here. Repo here Conclusion In this tutorial, we have created a reusable component as we can use anywhere in our application. Using React Portals, we can insert it anywhere in the DOM as it will create a new element with the , we assign to it. id We also have different styling options for our modal, and we can add the ones we can think of, besides having implemented a dark mode that I particularly like. I hope this tutorial has been useful for you and that you have learned new things in developing this application. Also published here.

Using React and Typescript to Create Reusable and Customizable Modals

This tutorial is the sixth part of our React Native Car Parking App UI clone series. In the , we successfully implemented the Header section in our map screen as well as organized our code. In this part of the tutorial series, we are going to continue from where we left off in the last part. So, it is recommended to go through all the previous parts of this tutorial series in order to get the full insight and development of the project. last part As mentioned in the previous parts, the motivation for this tutorial series came from the React Native App Templates that provides us with a dynamic, fully-coded starter kit written in React Native that anyone can use to build their own store locator React Native application or initiate their own startup. And, this sixth part is also the continuation of coding implementations and designs from the YouTube video tutorial by for the Car parking Finder App UI clone. The video tutorial seems to deliver the implementations of different UI sections using a fast coding style that may be difficult to understand for any developer especially the beginners. However, this tutorial gives step by step guidance on the implementation of each UI section. Hence, the readers can relax and take time to learn and implement the UI. React UI Kit Overview In this sixth part of the tutorial series, we are going to implement a Modal that displays extended information of the parking card section with different UI sections. The idea is to install the react-native-modal package and integrate it into the map screen. Then, we are going to configure the Modal in order to make it look like in the actual app. Lastly, we will implement different sections inside the Modal view and style them. So, let us begin!! Installing Modal Package Here we are going to install the package into our project. This package provides an enhanced, animated and customizable react-native modal. The main aim of this package is to is expanding the original react-native component by adding animations and styles customization options while still providing a plain-simple API. Now in order to install this package into our project, we need to run the following command: react-native-modal Modal expo install react-native-modal Then, we need to import this package as Modal component in the Map.js file as shown in the code snippet below: import Modal from 'react-native-modal'; Implementing modal In this step, we are going to implement the modal into our Map screen. For that, we need to define a state called in order to handle the opening and closing of the modal. The should be defined as shown in the code snippet below: activeModal activeModal state = { : {}, : , : } hours active null activeModal null Now, we need to activate the modal when pressing the buy button on our parking spot card. For that, we need to change the state of in the event of component as shown in the code snippet below: activeModal onPress TouchableOpacity <TouchableOpacity style={styles.buy} onPress={() => .setState({ : item })}> <Text style={styles.buyTotalPrice}>${item.price *2}</Text> <Text style={{ color : theme.COLORS.white}}>{item.price}x{hours[item.id]} hrs</Text> <View style={styles.buyButton}> < TouchableOpacity> this activeModal < = > View style {styles.buyTotal} </ > View > < = , }}> Text style {{fontSize: 25 color : theme.COLORS.white </ > Text /View>
              </ Here, we have just implemented a trigger to open the modal but have not implemented the actual component yet. So now, we are going to implement the actual modal. Modal Defining a new function for modal Here, we are going to define a new function called . This function will return the template with the component. The overall implementation of this function is provided in the code snippet below: renderModal() Modal renderModal(){ {activeModal} = .state; (!activeModal) ; ( <View style={styles.modal}>
           <Text>{activeModal.title}</Text>
         </View> )
   } const this if return null return this.setState({ activeModal: null })}
        onBackdropPress={() => this.setState({ activeModal: null })}
       > < = => Modal isVisible onBackButtonPress {() </ > Modal Here, inside the method, we have defined constant from the state variable. Then, if the state is empty then the function will return null which will not show the on the app screen. However, if the state is not empty, the function will return the template with component. The component here is configured with different props. renderModal() activeModal activeModal renderModal() Modal activeModal Modal Modal The prop is used to show the modal on the screen. In the and events of the component we have changed the state to null in order to hide the from the screen. We have also integrated some component wrapping Text component with some inline styles. isVisible onBackButtonPress onBackdropPress Modal activeModal Modal View Now, we need to call the method in the function of our file as shown in the code snippet below: renderModal() render() Map.js render(){ (
  …………
           { .renderParkings()}
           { .renderModal()}
      < return this this /View>
   )
} Now, the required style used in the function is provided in the code snippet below: renderModal() modal : { : theme.COLORS.white
  } backgroundColor Hence, we will get the following result in the emulator screen: As we can see, a modal appears on the screen. But the modal is too small, so we need to configure it with more props and style in order to make the modal more appealing. Configuring Modal properties and styles Here, we are going to configure the component with some additional props and styles. For that, we need to use the code from the following code snippet: Modal renderModal(){ {activeModal} = .state; (!activeModal) ; ( <View style={styles.modal}>
           <Text>{activeModal.title}</Text>
         </View> )
   } const this if return null return this.setState({ activeModal: null })}
        onBackdropPress={() => this.setState({ activeModal: null })}
        onSwipeComplete={() => this.setState({ activeModal: null })}
        
       > < = = => Modal isVisible useNativeDriver style {styles.modalContainer} onBackButtonPress {() </ > Modal Here, we have included a prop called which uses the native driver configurations and properties to handle the workings of Modal. We have also included a event which changes the state to null. Then, we have also provided a style property to the component which is provided in the code snippet below: useNativeDriver inSwipeComplete activeModal Modal modalContainer: { : , : ,
  }, : { : height * , : theme.COLORS.white,
  }, margin 0 justifyContent 'flex-end' modal height 0.75 backgroundColor Hence, we will get the following result in the emulator screen: As we can see, the Modal component now covers more than half of the lower part of the screen. Adding Modal content Now, we are going to add some content inside the Modal view. We have added the trigger to open the Modal when we press the buy button in each car parking spot. When triggering, we have set the activeModal state to the particular parking spot data from the data array. Now, we are going to use the value stored in the activeModal state in order to add the different parking spot information to the Modal. For that, we need to use the code from the following code snippet in the function: parkingsSpots renderModal renderModal(){ {activeModal , hours} = .state; (!activeModal) ; ( <View style={styles.modal}>
           <View>
            <Text>{activeModal.title}</Text>
           </View>
           <View>
              <Text>{activeModal.description}</Text>
            </View>
            <View style={{flexDirection : 'row'}}>
              <Text>{activeModal.price}</Text>
              <Text>{activeModal.rating}</Text>
              <Text>{activeModal.distance}</Text>
              <Text>{activeModal.free}/{activeModal.total}</Text>
            </View>
            <View>
              <Text>Choose your Booking Period</Text>
            </View>
            <View>
                <TouchableOpacity style={styles.buy}>
                    <View style={styles.buyTotal}> 
                      <Text style={styles.buyTotalPrice}>${activeModal.price *2}</Text>
                      <Text style={{ color : theme.COLORS.white}}>{activeModal.price}x{hours[activeModal.id]} hrs</Text>
                    </View>
                    <View style={styles.buyButton}>
                      <Text style={{fontSize: 25, color : theme.COLORS.white}}>></Text>
                    </View>
                </TouchableOpacity>
            </View>
         </View> )
   } const this if return null return this.setState({ activeModal: null })}
        onBackdropPress={() => this.setState({ activeModal: null })}
        onSwipeComplete={() => this.setState({ activeModal: null })}
        
       > < = = => Modal isVisible useNativeDriver style {styles.modalContainer} onBackButtonPress {() </ > Modal Here, we have added different and component to display the information in the data array. We have also used the component which wraps the and component for the final buy button in the Modal. The components are bound to different styles which are provided in the code snippet below: View Text parkingsSpots TouchableOpacity View Text modal: { : , : height * , : theme.SIZES.base * , : theme.COLORS.white, : theme.SIZES.base, : theme.SIZES.base,
  }, flexDirection 'column' height 0.75 padding 2 backgroundColor borderTopLeftRadius borderTopRightRadius Hence, we will get the following result in our emulator screen: As we can see, some content has appeared on the screen but are out of place. Now, we need to style them properly in order to make the Modal content look appealing as in the actual app. Here, we can also notice that we have added the additional distance and description data in the Modal content. But these data are not included in the parkingsSpots data array. So, we need to include that first. Adding addition data Here, we are going to add the distance and description data to each item in the data array as shown in the code snippet below: parkingsSpots parkingsSpots = [
  { : , : , : , : , : , : , : { : , : ,
    }, : , : ,
  },
  { : , : , : , : , : , : , : { : , : ,
    }, : , : ,
  },
  { : , : , : , : , : , : , : { : , : ,
    }, : , : ,
  },
]; const id 1 title 'Parking 1' price 5 rating 4.2 spots 20 free 10 coordinate latitude 37.78735 longitude -122.4334 distance 2.5 description `Description about this parking lot
Open year 2018
Secure with CTV` id 2 title 'Parking 2' price 7 rating 3.8 spots 25 free 20 coordinate latitude 37.78845 longitude -122.4344 distance 3.5 description `Description about this parking lot
Open year 2018
Secure with CTV` id 3 title 'Parking 3' price 10 rating 4.9 spots 50 free 25 coordinate latitude 37.78615 longitude -122.4314 distance 1 description `Description about this parking lot
Open year 2018
Secure with CTV` Styling the content Here, we are going to style the components inside the component in order to make the Modal content appear as in the actual app. For that, we need to use the code in the following code snippet: Modal <Modal
        isVisible
        useNativeDriver
        style={styles.modalContainer}
        onBackButtonPress={() => .setState({ : })}
        onBackdropPress={() => .setState({ : })}
        onSwipeComplete={() => .setState({ : })}
        
       > <View>
            <Text style={{ fontSize: theme.SIZES.font * 1.5 }}>
              {activeModal.title}
            </Text>
          </View> <View style={{ paddingVertical: theme.SIZES.base }}>
            <Text style={{ color: theme.COLORS.gray, fontSize: theme.SIZES.font * 1.1 }}>
              {activeModal.description}
            </Text>
          </View> <View style={styles.modalInfo}>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> ${activeModal.price}</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.rating}</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.distance}km</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.free}/{activeModal.spots}</Text>
            </View>
          </View> <View style={styles.modalHours}>
            <Text style={{ textAlign: 'center', fontWeight: '500' }}>Choose your Booking Period:</Text>
          </View> <View>
            <TouchableOpacity style={styles.payBtn}>
              <Text style={styles.payText}>
                Proceed to pay ${activeModal.price * hours[activeModal.id]}
              </Text>
              <FontAwesome name='angle-right' size={theme.SIZES.icon * 1.75} color={theme.COLORS.white} />
            </TouchableOpacity>
          </View>
        </View> this activeModal null this activeModal null this activeModal null < = > View style {styles.modal} </ > Modal Here, we have added different inline style properties as well as styles from the component. The required styles from the component is provided in the code snippet below: StyleSheet StyleSheet modalInfo: { : , : , : theme.SIZES.base, : , : , : theme.COLORS.overlay, : theme.COLORS.overlay,
  }, : { : height * ,
  }, : { : , : , : , : , : theme.SIZES.base * , : theme.COLORS.red,
  }, : { : , : theme.SIZES.base * , : theme.COLORS.white,
  } flexDirection 'row' justifyContent 'space-evenly' paddingVertical borderTopWidth 1 borderBottomWidth 1 borderTopColor borderBottomColor modalHours paddingVertical 0.11 payBtn borderRadius 6 flexDirection 'row' alignItems 'center' justifyContent 'space-between' padding 1.5 backgroundColor payText fontWeight '600' fontSize 1.5 color Hence, we will get the following result in our emulator screen: As we can see, we have got all the components in the proper positions which makes the Modal look more appealing. Now, we need to add icons to the Modal. Adding Icons Here, we are going to add the icons to the respective UI sections in the Modal content. We have already imported the package from the package provided by the expo client. Now, we are going to include the Ionicons component as shown in the code snippet below: Ionicons vector-icons <View style={styles.modalInfo}> <Ionicons name='ios-pricetag' size={theme.SIZES.icon * 1.1} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> ${activeModal.price}</Text>
            </View> <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Ionicons name='ios-star' size={theme.SIZES.icon * 1.1} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.rating}</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Ionicons name='ios-pin' size={theme.SIZES.icon * 1.1} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.distance}km</Text>
            </View>
            <View style={[styles.parkingIcon, {justifyContent: 'flex-start'} ]}>
              <Ionicons name='ios-car' size={theme.SIZES.icon * 1.3} color={theme.COLORS.gray} />
              <Text style={{ fontSize: theme.SIZES.icon * 1.15 }}> {activeModal.free}/{activeModal.spots}</Text>
            </View>
          </View> < = { ' '} ]}> View style {[styles.parkingIcon, justifyContent: flex-start Here, we have provided the size and color props to the Ionicons component. The props are in accordance to our and variable from the file. COLORS SIZES theme.js Hence, we will get the following result in our emulator screen: As we can see, we have got the icons in our view. But we can see there is something missing in section with ‘Choose your Bookings Period’. In this section, we need to add the hours section as in the parking spot cards. Modal Adding hours section to Modal Here, we are simply going to add the hours section to modal. We are going to add this section using below the component having ‘Choose your Booking Period’ text as shown in the code snippet below: Text <View style={styles.modalHours}> <View style={styles.modalHoursDropdown}> < View> Choose your Booking Period: < = ' ', ' ' }}> Text style {{ textAlign: center fontWeight: 500 </ > Text 5:00 hrs < = }}> Text style {{ color: theme.COLORS.gray </ > Text /View>
          </ Here, the component wraps the component with text showing hours. The required style is provided in the code snippet below: View Text modalHours: { : height * ,
  }, : { : , : , : , : theme.SIZES.base,
  }, paddingVertical 0.15 modalHoursDropdown flexDirection 'row' justifyContent 'center' alignItems 'center' paddingVertical Hence, we will get the following result in our emulator screen: As we can see, we have got the hours section in our Modal. With this, we have come to the end of this part of our tutorial. Finally, we have successfully completed the implementation of Modal in our Map screen. Conclusion This tutorial is the sixth part of the React Native Car Parking Finder App UI clone tutorial series. In this part, we continued from where we left off in the fifth part of this tutorial series. In this part of the tutorial, we learned how to set up the package in order to implement the Modal in our Map screen. We also learned how to configure the Modal component in order to make it look as well as transition better. Then, we also got insight into adding different UI sections inside the component. Finally, we were successful in implementing the view just as in the actual app design. react-native-modal Modal Modal In the next part of this tutorial series, we are going to implement a time dropdown in our parking spot card section.

React Native Car Parking Finder App UI Clone #6: Implementing Modal View

AirBnB Clone with React Native Part 5: Loading Modal Implementation This tutorial is the fifth chapter of our implementation of an AirBnB clone in React Native. In the previous chapter, we successfully implemented a login error notification system. In case you need to get caught up, here are links to parts 1–4: https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-1-home-screen-ui-b5ed1c9278ae https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-2-login-screen-ui-999773e860e4 https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-3-email-authentication-with-firebase-2153a00175ab https://heartbeat.fritz.ai/airbnb-clone-with-react-native-part-4-login-error-notifications-580beb4fc03c In part 5, we’re going to continue from where we left off by implementing a loading modal before generating the error notification message. Usually, we might notice a delay in the response from the server when we initialize the request. This may be caused by a slow internet connection or slow device. Here, we’re going to create or simulate such a scenario while logging in. In summary, we’re going to create a loading modal that executes when we press the login button to simulate the delay in response and show the notification error message that we implemented in the previous chapter after loading completes. So let’s get started! Creating a Loader Component First, we’re going to create a simple component named Loader in the Loader.js file. Here, we need to create a simple class named Loader that extends to the Component module of React. We’re going to implement a loading modal in this Loader component, so we need to import the Modal component from the package. For now, we’re just going to render text using a Text component wrapped inside the Modal component, as shown in the code snippet below: react-native React, { Component } ; { View, Image, Modal, StyleSheet, Text} ; {
  render() { ( <Text>This is modal</Text> );
  }
} import from 'react' import from 'react-native' export default class Loader extends Component return < = > Modal visible {true} </ > Modal Next, we’re going to import our Loader component into our Login component in the Login.js file: Loader “../components/Loader”; import from Then, we need to initialize or render our Loader component below the Notification component: <View> <Loader /> < = = = = /> Notification showNotification {showNotification} handleCloseNotification {this.handleCloseNotification} title "Error" message {this.state.error} </ > View As a result, we’ll get the modal in the Loader component with text displayed at the top of the screen, as shown in the emulator screenshot below: Configuring and styling modal Next, we’re going to configure the modal using props so that it will look more appealing. The props we’re going to use here are animationType, transparent, and visible. The animationType and visible props are defined in the initialized Loader component in the Login.js file, as shown in the code snippet below: <Loader 
  modalVisible = { }
  animationType= /> true "fade" The code in the above snippet sends the modalVisible and animationType props from parent component—i.e. the Login component—to the child component—i.e. the Loader component. Now, we need to receive the props into the child Loader component and configure the modal accordingly. The modalVisible and animationType props are made mandatory in the Loader component. The code to receive the props and configure the modal is provided below: { PropTypes } ; {
  render() { { animationType, modalVisible } = .props; ( <View style={styles.wrapper}>
            <Text>This is modal</Text>
          </View> );
  }
}

Loader.propTypes = { : PropTypes.string.isRequired, : PropTypes.bool.isRequired,
}; import from 'prop-types' export default class Loader extends Component const this return < = = = > Modal animationType {animationType} transparent {true} visible {modalVisible} </ > Modal animationType modalVisible As we can see above, the props are received and then bound to required modal props. Configuring the modal isn’t enough so we need to style the modal View wrapper as well. The styling is done using the Stylesheet component, and the styles required are provided in the code snippet below: wrapper: { : , : , : , : , : , : , : ,
}, zIndex 9 backgroundColor 'rgba(0,0,0,0.6)' position 'absolute' width '100%' height '100%' top 0 left 0 Now, our resulting modal will appear as shown in the following screenshot: Adding a GIF loading file to Image component in Modal In this step, we’re going to add a GIF file, which has a loading image in place of the Text component inside the Modal component of our Loader.js file. For that, we need to import the Image component from the react-native package, which we’ve already done at the beginning. Then, in the source prop of the Image component, we need to add a location to our GIF file. The location is (‘../img/greenLoader.gif’). The code to add this is provided below: loaderContainer: { : , : , : colors.white, : , : , : , : , : , : ,
  }, width 90 height 90 backgroundColor borderRadius 15 position 'absolute' left '50%' top '50%' marginLeft -45 marginTop -45 As we can see in the above code snippet, the Image component is wrapped by another View component. Both the components are styled using Stylesheet. The styling for the components is provided in the code snippet below: Now, let's have the look at our resulting loading modal: As we can see, the loading GIF image appears at the center of the modal. Now, we need to execute this loading modal when the login button is pressed. Handling Loading Modal Visibility Showing Loading Modal when Login is pressed In this step, we’re going to execute the loading modal when we press the login button. For this, we need to set a state variable in the Login.js file that handles the execution of the loading modal. Here, we set the state variable as loadingVisible, which takes a boolean value. If the loadingVisible state is true, the loading modal appears on the screen, and if it’s set to false , the loading modal doesn’t appear on the screen. The code snippet to initialize the state variable loadingVisible is given below: .state = { : , : , : , : , : , : }; this user null email "" password "" formValid true error "" loadingVisible false Now we need to initialize the loadingVisible state inside the render() function so that it’s easily accessible to the render elements. The code to do this is provided below: render() { { formValid, loadingVisible } = .state; showNotification = formValid ? : ; const this const false true Now we need to pass the loadingVisible state as a prop to the Loader component by binding it to modalVisible prop, as shown in the code snippet below: <Loader 
  modalVisible = {loadingVisible}
  animationType= /> "fade" Finally, we need to handle the change of the loadingVisible state when the login button is pressed. We know that when we press the login button on the screen, it executes the Login() function of the Login.js file. So we need to change the state of loadingVisible while executing the Login() function, as shown in the code snippet below: Login = { .setState({ : });

    firebase
      .auth()
      .signInWithEmailAndPassword( .state.email, .state.password)
      .then( { .setState({ user });
      })
      .catch( .setState({ : error.message, : })
      );
  }; => () this loadingVisible true this this => user this => error this error formValid false Now when we press the login button, the Login() function executes, changing the loadingVisible state to true. As a result, the loading modal becomes visible on the screen: As we can see in the simulation above, the loading modal appears when we press the login button. But the loading modal needs to disappear when the error notification message pops up at the bottom. Hiding Loading Modal when the Notification is displayed Here, we’re going to hide the loading modal when the error notification component pops up. It’s very simple. We just need to set the loadingVisible state to false while sending the error message prop to the Notification component in the Login() function of the Login.js file. The code to do this is provided in the code snippet below: Login = { .setState({ : });

    firebase
      .auth()
      .signInWithEmailAndPassword( .state.email, .state.password)
      .then( { .setState({ user }); .setState({ : });
      })
      .catch( .setState({ : error.message, : loadingVisible: })
      );
  }; => () this loadingVisible true this this => user this this loadingVisible false => error this error formValid false false Now, let’s refresh the emulator and check to see if everything works: As we can see, the loading modal disappears when the notification message pops up. This successfully completes our tutorial for implementing the Loading modal in our AirBnB clone using React Native. Conclusion In this tutorial, we learned how to implement a Loading modal to simulate a delay in the response from the server. We also learned how to pass data between parent and child components as props in React Native. We got detailed insight on how to use the Modal component and how to configure it using the props. To this end, we successfully created a loader which appears when logging in and disappears when an error notification pops up. This is a perfect example to simulate a loader while we wait for the response from the server. Lastly, we learned how to control the styles dynamically with the state variable and how to add animations. All the code for this tutorial is available in this . In the next chapter, we’re going to continue to implement our AirBnB clone app by adding animated checkmarks. GitHub repo credit Airbnb Clone using React Native Series by Cubui Disclosure This post includes affiliate links; I may receive compensation if you purchase products or services from the different links provided in this article.

[DIY] AirBnB Clone with React Native Part 5: Loading Modal Implementation

This tutorial is the fifth part of our React Native Plant App tutorial series. In the , we successfully implemented the Illustrations section with the image slider and Steps section with animated Delimiter dots. This tutorial is the continuation of the same tutorial from where we left off in the last part. So, it is recommended to go through the previous part in order to get insight and knowledge of the overall project. previous part In case of wanting to learn from the beginning, all the previous parts for this tutorial series are available below: React Native Plant App UI #1: Getting Started React Native Plant App UI #2: Implementing Custom Components Building React Native Plant App UI #3: Implementing Welcome Screen React Native Plant App UI #4: Illustration Slider and Animated Steps As mentioned in the previous parts, the inspiration to work on this tutorial series came from React Native Theme that provide a wide variety of mobile application templates written in React Native and powered by universal features and design. These app templates allow us to implement our own apps and even start our own startups. And, this fifth part is also the continuation of coding implementations and designs from the Youtube video tutorial by for the Plant App. The video tutorial delivers the coding implementation of the overall app very thoroughly. However, there is no verbal guidance for coding and implementation. Hence, this tutorial series is the implementation of the same coding style and designs in the form of the article. Thus, the learners can go through each step and take their time understanding the implementations. React UI Kit Overview In this fifth part of this tutorial series, we are going to implement the in the form of a Modal view. This TOS section will contain the terms and services of the app as in the actual app. The implementation of this section will also complete our overall implementation of the Welcome screen. The idea is to start by implementing the view when clicking the 'Terms of service' button at the bottom of the welcome screen. Then, we will add the content inside the modal view and make it scrollable as well. Then, we will implement the button to close the modal as well as configure the closing of the modal through the device back button. Terms of Service(TOS) section Modal So, let us begin!! Implementing the TOS section Here, we are going to implement the TOS section in our Welcome screen. This is the last UI section in our Welcome screen which will appear in the form of . We have already added the 'Terms of Services' button at the bottom of the Welcome screen. So, when we click on that button, the showing all the Terms of Services should appear. But first, we need to import the component from the package as shown in the code snippet below: Modal Modal Modal react-native { StyleSheet, FlatList, Image, Dimensions, Animated, Modal } ; import from 'react-native' Then, we need to define the state variable called in order to handle the opening and closing of our . The initialization of the state variable is shown in the code snippet below showTerms Modal state = { : ,
  } showTerms false Defining a Separate Function Now, as we have separated out different UI sections of the Welcome screen as a function. We are going to implement this TOS section in the function as well. The function will return the template for the component. The function is called and its implementation is provided in the code snippet below: Modal renderTermServices() renderTermsServices(){ ( <Text>Modal</Text> )
  } return < = = > Modal animationType "slide" visible {this.state.showTerms} </ > Modal Here, the function returns the component. The component wraps the Text component. The component is configured with some props. the prop is set to slide so that there is the sliding effect while opening and closing modal. And the visible prop handles the opening and closing of the modal on the basis of boolean value. renderTermsServices() Modal Modal Modal animationType showTerms Now, we need to change the state of variable to true show that the modal opens. We are going to do that in the Terms of service button of the Welcome screen available in the function: showTerms render() <Block middle flex={ } margin={[ , theme.sizes.padding * ]}> <Text center semibold white>Login</Text> <Button shadow onPress={() => .props.navigation.navigate( )}> < Text> < Block> 0.5 0 2 this.props.navigation.navigate('Login')}> < = => Button gradient onPress {() </ > Button this 'SignUp' Signup < > Text center semibold </ > Text /Button>
    <Button onPress={() => this.setState({ showTerms: true })}>
      <Text center caption gray>Terms of service</ </ > Button /Block>
  {this.renderTermsServices()}
</ Here, in the event of the component representing Terms of service, we have changed the state of the variable to true. Then, we have also called the function below the wrapping the Button components. onPress Button showTerms renderTermsServices() Block Hence, we will get the following result in our emulator screen: As we can see, when we clock the Terms of service button, the modal appears sliding from the bottom. But the modal view has nothing except a text. So now, we are going to add the content to our Modal view. Adding Content to Modal Here, we are going to add the content header as well as the contents. The content we are going to add will represent the Terms of service from the actual all. Altogether there are ten terms that will be displayed in the view. Hence, in order to add the content to the , we need to use the code from the following code snippet: Modal Modal Modal <Modal  animationType= visible={ .state.showTerms}> <Text h2 light>Terms of Service</Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        1. Your use of the Service is at your sole risk. The service is provided on an "as is" and "as available" basis.  
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        2. Support for Expo services is only available in English, via e-mail.
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        3. You understand that Expo uses third-party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Service.
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        4. You must not modify, adapt or hack the Service or modify another website so as to falsely imply that it is associated with the Service, Expo, or any other Expo service. 
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        5. You may use the Expo Pages static hosting service solely as permitted and intended to host your organization pages, personal pages, or project pages, and for no other purpose. You may not use Expo Pages in violation of Expo's trademark or other rights or in violation of applicable law. Expo reserves the right at all times to reclaim any Expo subdomain without liability to you.
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        6. You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Service, use of the Service, or access to the Service without the express written permission by Expo.
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        7. We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party's intellectual property or these Terms of Service.
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        8. Verbal, physical, written or other abuse (including threats of abuse or retribution) of any Expo customer, employee, member, or officer will result in immediate account termination.
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        9. You understand that the technical processing and transmission of the Service, including your Content, may be transferred unencrypted and involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.
      </Text> <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
        10. You must not upload, post, host, or transmit unsolicited e-mail, SMSs, or "spam" messages.
      </Text> < "slide" this < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, the component wraps a component with styling props. Then, the component wraps a bunch of components which is used to display the content header as well as ten terms as points. All the components have the same styling props except the one which encloses the header text. Modal Block Block Text Modal Text Note that these Block and Text components are from our predefined custom components; not from the react-native package. Hence, we will get the following result in our emulator screen: As we can see, we have got the TOS section header as well as the list of terms while opening the modal. But, we cannot view all the terms of the list because they are not scrollable. Due to this, we can only view the portion of the terms list which the app screen can accommodate. Now, we need to be able to scroll the list in order to view all the points on the list. Making Terms List Scrollable Here, we are going to make the terms list that we added in our previous step scrollable. For that, we need to wrap all the component representing the terms list inside the component. The overall implementation is provided in the code snippet below: Text ScrollView <Modal  animationType= visible={ .state.showTerms}> <Text h2 light>Terms of Service</Text> <ScrollView style={{ marginVertical: theme.sizes.padding }}>
....................................
      ............................
      </ScrollView> < "slide" this < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, we have added the component wrapping all the Text components representing the Terms list. The component is also configured with some inline styles. ScrollView ScrollView Hence, we will get the following result in our emulator screen: As we can see, our Terms List in the component is now scrollable. Modal Adding Button to Modal Here, we are going to add a button to the which can be used to close the modal. The button will be placed at the bottom of the . For that, we need to use the code from the following code snippet in the function: Modal Modal renderTermsServices() <Modal  animationType= visible={ .state.showTerms}> <Text h2 light>Terms of Service</Text> <ScrollView style={{ marginVertical: theme.sizes.padding }}>
        ....................................
        .......................................
        </ScrollView> <Block middle padding={[theme.sizes.base / 2, 0]}>
            <Button gradient onPress={() => this.setState({ showTerms: false })}>
              <Text center white>I understand</Text>
            </Button>
         </Block> < "slide" this < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, we have added a component with some style props to below the component inside the component. The component wraps the component with a gradient texture style. The component, in turn, wraps the component with some text. In the event of the component, we have changed the state of state variable to false using function. This will cause the component to close when we press this button. Block ScrollView Modal Block Button Button Text onPress Button showTerms setState Modal Hence, we will get the following result in our emulator screen: As we can see, we have got the button at the bottom of the . Hence, when we press on the button the closes. Modal Modal Closing the Modal from Device Back Button Here, we are going to trigger the closing of the while pressing the back button on our mobile device. For that, we have to make use of the event in our component. The callback is called when the user presses the hardware back button on Android or the menu button on Apple TV. We have to integrate this callback in our component as shown in the code snippet below: Modal onRequestClose Modal onRequestClose Modal <Modal  animationType= visible={ .state.showTerms} onRequestClose={() => .setState({ : })}> <Text h2 light>Terms of Service</Text> <ScrollView style={{ marginVertical: theme.sizes.padding }}>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          1. Your use of the Service is at your sole risk. The service is provided on an "as is" and "as available" basis.  
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          2. Support for Expo services is only available in English, via e-mail.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          3. You understand that Expo uses third-party vendors and hosting partners to provide the necessary hardware, software, networking, storage, and related technology required to run the Service.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          4. You must not modify, adapt or hack the Service or modify another website so as to falsely imply that it is associated with the Service, Expo, or any other Expo service. 
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          5. You may use the Expo Pages static hosting service solely as permitted and intended to host your organization pages, personal pages, or project pages, and for no other purpose. You may not use Expo Pages in violation of Expo's trademark or other rights or in violation of applicable law. Expo reserves the right at all times to reclaim any Expo subdomain without liability to you.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          6. You agree not to reproduce, duplicate, copy, sell, resell or exploit any portion of the Service, use of the Service, or access to the Service without the express written permission by Expo.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          7. We may, but have no obligation to, remove Content and Accounts containing Content that we determine in our sole discretion are unlawful, offensive, threatening, libelous, defamatory, pornographic, obscene or otherwise objectionable or violates any party's intellectual property or these Terms of Service.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          8. Verbal, physical, written or other abuse (including threats of abuse or retribution) of any Expo customer, employee, member, or officer will result in immediate account termination.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          9. You understand that the technical processing and transmission of the Service, including your Content, may be transferred unencrypted and involve (a) transmissions over various networks; and (b) changes to conform and adapt to technical requirements of connecting networks or devices.
        </Text>
        <Text caption gray height={24} style={{ marginBottom: theme.sizes.base }}>
          10. You must not upload, post, host, or transmit unsolicited e-mail, SMSs, or "spam" messages.
        </Text>
      </ScrollView> <Block middle padding={[theme.sizes.base / 2, 0]}>
        <Button gradient onPress={() => this.setState({ showTerms: false })}>
          <Text center white>I understand</Text>
        </Button>
      </Block> < "slide" this this showTerms false < = * , ]} = > Block padding {[theme.sizes.padding 2 theme.sizes.padding space "between" </ > Block /Modal> Here, we have changed the state variable to false in the event of component. We have also provided the whole template of the modal. showTerms onRequestClose Modal Hence, we will get the following result in our emulator screen: As we can see, the closes when we tap on the back button of the mobile device. With this, we have come to the end of this part of our tutorial. Modal Finally, we have successfully implemented all the UI sections of the Welcome screen in our React Native Plant App. Conclusion This tutorial is the fifth part of the React Native Plant App UI tutorial series. In this part, we continued from where we left off in the fourth part of this tutorial series. In this part of the tutorial, we learned how to implement a modal using component provided by the react-native package. We also learned how to add content to the body as well as make it . Then, we also learned how to add a button to modal and configure it as a closing mechanism. Lastly, we also got insight on how to make the device back or home button trigger the closing of Modal. Modal Modal Scrollable In the next part of this tutorial series, we are going to implement the overall UI of the Login Screen in the file. Login.js

React Native Plant App UI #5 : Terms of Service Modal

(This post was originally posted to my personal blog ) Controlling modals of all kinds (informational modals, custom alerts, image lightboxes, …) across an application is a frustrating problem that we all face when developing apps. When the app is simple, it’s sufficient to place a single component and have a state to toggle it on/off. However, things get complicated when you have different places to present the same modal or different kinds of modal to display in your app. <Modal /> There have been a couple of design solutions for this such as using the React Context API ( is an example) or manipulating ’s (as described in ). In this post, I would like to share my own design for this problem using a singleton component. What we will achieve from this solution is an imperative API like: this blog react-navigation StackNavigator this blog post <Modal /> SomeModal.show(title, content, { ...options })SomeModal.hide() (Note that this is kinda similar to guide ) react-navigation Navigating without the navigation prop is a react component and it is rendered in the top-level like this: <SomeModal /> class App extends Component {  render() {    // Container is your own wrapper component    return (      <Container>        {/* Your real app */}        <SomeModal />      </Container />    );  }} So how does knows what to do when we call and methods? First, we will define component methods and , then in its constructor, we save its reference to a static property of by using (since in the constructor will be the reference to the rendered component). That reference will have access to all component methods of . We now can make two static methods and use it: SomeModal show() hide() __show() __hide() SomeModal this this SomeModal show(), hide() class SomeModal extends Component {  static show() {    SomeModal.__singletonRef.__show();  }  static hide() {    SomeModal.__singletonRef.__hide();  }  constructor(props) {    super(props);    SomeModal.__singletonRef = this;  }  __show() { ... }  __hide() { ... }} When doing this singleton component, we need to make sure we do not use this component twice in the app, since the reference will not be correct. This is the best fit, in my opinion, when we have a defined modal style across the app and we want to show and hide it everywhere we want to. This also allows showing and hiding modal outside of a React component. What if you have different kinds of modals? In my own project, for every kind of modal, I make a separate React component and render it to the top level like this: <Container>  {...}  <FeedbackModal />  <LinkPreviewModal />  <AlertModal /></Container /> Hope you found this way of working with modals useful. Please let me know your thoughts! Happy hacking!

Stories, News & Mentions about MODAL

Modal’s Stories on HackerNoon