How To Make an Image Banner Component with React

hey Radiance here let's create a reusable Banner component that looks nice it's dismissable and has a call to action since we are developers and non-graphic designers we'll use an image for the video part here is an example of how displayed in my app enginecreator.org to prompt people to watch a YouTube video related to the page topic you can find both the demo and the source code in the description the image Banner component accepts five properties on close a function that will be called when they recluse the close button action is usually a button that will be displayed at the bottom of the banner the title of the banner an image for the background represented as a react element instead of an image pass to ensure compatibility with different Frameworks like Netflix or gazpi render interactive array is a function that drops a banner with an interactive element such as an external leak or button that triggers an action in the app right check habits education buyer component from increaser to see how to use the banner we start the interaction timestamp in the local storage the user has already closed the banner or clicked on it we don't show it again for more information on setting up solid local search please refer to this video the word extra work the wire will have the same appearance in both dark and light modes the achieved it by rocking with a theme provider and making the Dark theme the default for the Bonner we render the bar inside the external link component which is an anchor element this will open the video in a new tab the track interaction available since the banner is wrapped with an anchor we don't want the action to be an interactive clickable element therefore we referred as a div element and exclude the unclick Handler to ensure proper contrast between the title and the image background we have selected a custom title caller for more information on effectively managing colors with hslip format please refer to this video finally we pass an image which is wrapped with a safe image component this component won't render anything if the image fails to I found the mountain image on unsplash but next time I might use AI generative tools like me Journey the cover image component takes up the entire space and sets object fit to cover now let's look at the implementation of the image Banner component since we cannot render a button inside another button we need to wrap the binary with a position relative element and render the close button absolute with an abstract component called action inside interactive element to choose this the close button has the background of a text element and contains a close icon you position it 20 pixels from the top and right of the burner we rub the content with an interactive element based on the consumer's Choice by Common render interactive area and passing the binary itself as a child the banner has the same shape as a panel component with position set relative a defined mean head and a box Shadow to make it stand out better in light mode on Hover we make the image zoom in and make the button bigger by using transform scale to draw more attention to the title and button we blew the background on the content area with a Mist extra color for more information on an effective color plate for both dark and light mode please check out my other video all children inside the container are positioned absolutely we make the image take up the entire space and then render the content which includes the title and blurs the image that is positioned below the container on Hover finally we position the action button and set pointer elements none since the entire Banner is already clickable to become an effective programmer check out my productivity app at increaser.org

Channel: Radzion Dev

Views: 1,433

Keywords:

Id: BcQ05BR5Pgw

Length: 3min 36sec (216 seconds)

Published: Thu Jul 20 2023