A Deep Dive into React Hooks/

...

/

Working Example of Notify Hook

Working Example of Notify Hook

Here is a fully functional React application that uses the Notify hook built in the previous lesson.

We'll cover the following...

See the Notify Hook in action

The following example demonstrates a fully functional usage of the Notify hook.

Run the application. By clicking on the Save button, it will show a notification message upon the completion of the API request.

Later in the course, various components that make up this application are discussed.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:osb="http://www.openswatchbook.org/uri/2009/osb"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   viewBox="0 0 48 48"
   version="1.1"
   id="svg15"
   sodipodi:docname="cross red circle.svg"
   inkscape:version="0.92.3 (2405546, 2018-03-11)">
  <metadata
     id="metadata19">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1920"
     inkscape:window-height="1027"
     id="namedview17"
     showgrid="false"
     inkscape:zoom="4.9166667"
     inkscape:cx="-11.694915"
     inkscape:cy="40.271186"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="g13" />
  <defs
     id="defs7">
    <linearGradient
       id="linearGradient828"
       osb:paint="solid">
      <stop
         style="stop-color:#ff0000;stop-opacity:1;"
         offset="0"
         id="stop826" />
    </linearGradient>
    <linearGradient
       id="0"
       gradientUnits="userSpaceOnUse"
       y1="47.37"
       x2="0"
       y2="-1.429">
      <stop
         stop-color="#c52828"
         id="stop2" />
      <stop
         offset="1"
         stop-color="#ff5454"
         id="stop4" />
    </linearGradient>
  </defs>
  <g
     transform="matrix(.99999 0 0 .99999-58.37.882)"
     enable-background="new"
     id="g13"
     style="fill-opacity:1">
    <circle
       cx="82.37"
       cy="23.12"
       r="24"
       fill="url(#0)"
       id="circle9"
       style="fill-opacity:1;fill:#FF7E00" />
    <path
       d="m87.77 23.725l5.939-5.939c.377-.372.566-.835.566-1.373 0-.54-.189-.997-.566-1.374l-2.747-2.747c-.377-.372-.835-.564-1.373-.564-.539 0-.997.186-1.374.564l-5.939 5.939-5.939-5.939c-.377-.372-.835-.564-1.374-.564-.539 0-.997.186-1.374.564l-2.748 2.747c-.377.378-.566.835-.566 1.374 0 .54.188.997.566 1.373l5.939 5.939-5.939 5.94c-.377.372-.566.835-.566 1.373 0 .54.188.997.566 1.373l2.748 2.747c.377.378.835.564 1.374.564.539 0 .997-.186 1.374-.564l5.939-5.939 5.94 5.939c.377.378.835.564 1.374.564.539 0 .997-.186 1.373-.564l2.747-2.747c.377-.372.566-.835.566-1.373 0-.54-.188-.997-.566-1.373l-5.939-5.94"
       fill="#fff"
       fill-opacity=".842"
       id="path11"
       style="fill-opacity:1;fill:#ffffff" />
  </g>
</svg>

Store

...