{
    "componentChunkName": "component---src-templates-blog-post-js",
    "path": "/react-tutorial-using-hoc-in-react-typescript-project/",
    "result": {"data":{"site":{"siteMetadata":{"title":"CrewCode Solutions"}},"markdownRemark":{"id":"3e3b2299-69e9-5128-9a84-a38cb7e1c60e","excerpt":"In this article i will explain you how you can use high order component in your react typescript project Step 1: Create React typescript project Create react…","html":"<p>In this article i will explain you how you can use high order component in your react typescript project</p>\n<h4>Step 1: Create React typescript project</h4>\n<p>Create react typescript project or you can skip this step if you wanted to use high order component in to your existing project</p>\n<pre><code class=\"language-js\">npx create-react-app my-app --template typescript\n</code></pre>\n<h4>Step 2: Create high order component in to your newly created or existing project</h4>\n<p>Create a file <strong>_ /src/hoc/hocComponent.tsx _</strong> and copy paste the following code</p>\n<pre><code class=\"language-js\">import React, { ComponentType } from \"react\";\n\nexport interface AdditionalProps {\n  additionalProp: string;\n}\n\nexport default function hoc&#x3C;P extends AdditionalProps>(\n  WrappedComponent: ComponentType&#x3C;P>\n): ComponentType&#x3C;Omit&#x3C;P, \"additionalProp\">> {\n  const additionalProp = \"sdfsd\";\n  console.log(\"Inside hoc\");\n  return (props) => (\n    &#x3C;WrappedComponent additionalProp={additionalProp} {...(props as any)} />\n  );\n}\n\n</code></pre>\n<h4>Step 3: Use this high order component in other component</h4>\n<p>In this last and final step you need to wrap your component with this high order component which we have created</p>\n<pre><code class=\"language-js\">import React from \"react\";\nimport hocComponent from \"../hoc/hocComponent\";\nconst MyOtherComponent: React.FC&#x3C;{}> = (props: any) => {\n  return &#x3C;div>My other component&#x3C;/div>;\n};\n\nexport default hocComponent(MyOtherComponent);\n</code></pre>","fields":{"slug":"/react-tutorial-using-hoc-in-react-typescript-project/"},"frontmatter":{"title":"React tutorial using high order component in react typescript project","date":"March 20, 2023","description":"In this article i will explain you to use high order component in react typescript project","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"previous":{"fields":{"slug":"/react-tutorial-parent-child-component-communication-react/"},"frontmatter":{"title":"React tutorial parent child communication in react typescript project","date":"March 10, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}},"next":{"fields":{"slug":"/react-tutorial-using-react-portals-refs-typescript/"},"frontmatter":{"title":"React tutorial using react portal and refs in typescript","date":"March 30, 2023","bannerimage":"https://crew-code-images.s3.us-east-1.amazonaws.com/blog_images/React.jpg"}}},"pageContext":{"id":"3e3b2299-69e9-5128-9a84-a38cb7e1c60e","previousPostId":"05040a2d-717a-52ca-91b0-3487fe4b3aa1","nextPostId":"bc5ca7cf-a9a9-51bf-a020-f308b4061a7a"}},
    "staticQueryHashes": ["3860684146"]}