![\"portal\"](\"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React-tutorial-using-react-1.png\")
In this article i will explain you how you can use react portals and refs in your react typescript project
\nCreate react typescript project or you can skip this step if you wanted to use react portal and refs in to your existing project
\nnpx create-react-app my-app --template typescript\nPortals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.
\nThis React portal component exists outside the DOM hierarchy of the parent component
\nGo to your /public/index.html file and there define a div with id other than root to render your portal
\nFor example: i have defined another div with id as notification-root
\n<body class=\"bg-light\">\n <noscript>You need to enable JavaScript to run this app.</noscript>\n <div id=\"notification-root\"></div>\n <div id=\"root\"></div>\n <!--\n This HTML file is a template.\n If you open it directly in the browser, you will see an empty page.\n\n You can add webfonts, meta tags, or analytics to this file.\n The build step will place the bundled scripts into the <body> tag.\n\n To begin the development, run `npm start` or `yarn start`.\n To create a production bundle, use `npm run build` or `yarn build`.\n -->\n </body>\nGo to your component where you wanted this custom html element to render inside your notification-root div and this piece of code for example i'm using Login.tsx
\nFor example i wanted to render a notification bar on top of my application layout that is top of my header
\nimport ReactDOM from \"react-dom\";\n\nconst Notification = () => {\n return (\n <div className=\"alert alert-success\" role=\"alert\">\n A simple success alert—check it out!\n </div>\n );\n};\n\nconst Login: React.FC<{}> = (props: any) => {\n const value = useContext(AuthContext);\n const navigate = useNavigate();\n const emailInputRef = useRef();\n return (\n <div>\n {ReactDOM.createPortal(\n <Notification />,\n document.getElementById(\"notification-root\") as HTMLElement\n )}\n <LoginForm\n ref={emailInputRef}\n navigate={navigate}\n login={props.login}\n context={value}\n />\n </div>\n );\n};\nThis will look something like this
\n
Refs provide a way to access DOM nodes or React elements created in the render method.
\nI will use same login form to demonstrate the refs for example you have email and password input and you want to access the email and password value on button click then you need to use refs like this
\nimport React,{useRef} from \"react\";\nimport ReactDOM from \"react-dom\";\n\nconst Notification = () => {\n return (\n <div className=\"alert alert-success\" role=\"alert\">\n A simple success alert—check it out!\n </div>\n );\n};\n\nconst LoginForm = (props:any) => {\n const getRefValue=()=>{\n console.log(props.ref.current.value);\n }\n return(\n <React.Fragment>\n <div className=\"form-floating\">\n <input\n type=\"email\"\n className=\"form-control\"\n name=\"email\"\n id=\"floatingInput\"\n placeholder=\"name@example.com\"\n ref={props.ref}\n />\n <label htmlFor=\"floatingInput\">Email address</label>\n </div>\n <div className=\"form-floating mt-3\">\n <input\n type=\"password\"\n className=\"form-control\"\n name=\"password\"\n id=\"floatingPassword\"\n placeholder=\"Password\"\n />\n <label htmlFor=\"floatingPassword\">Password</label>\n </div>\n <button\n onClick={()=>{\n getRefValue()\n\n }}\n className=\"w-100 btn btn-lg btn-warning\"\n type=\"button\"\n >\n Sign in\n </button>\n </React.Fragment>\n )\n\n}\n\nconst Login: React.FC<{}> = (props: any) => {\n const value = useContext(AuthContext);\n const navigate = useNavigate();\n const emailInputRef = useRef();\n return (\n <div>\n {ReactDOM.createPortal(\n <Notification />,\n document.getElementById(\"notification-root\") as HTMLElement\n )}\n <LoginForm\n ref={emailInputRef}\n navigate={navigate}\n login={props.login}\n context={value}\n />\n </div>\n );\n};\n