{"id":21169787,"url":"https://github.com/treyhuffine/is-react","last_synced_at":"2025-10-14T23:49:54.882Z","repository":{"id":20969304,"uuid":"91398399","full_name":"treyhuffine/is-react","owner":"treyhuffine","description":"Determine if a variable or statement is a React element or component","archived":false,"fork":false,"pushed_at":"2023-01-06T01:56:23.000Z","size":947,"stargazers_count":29,"open_issues_count":16,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-23T22:57:27.580Z","etag":null,"topics":["react","react-components"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/treyhuffine.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-16T00:58:06.000Z","updated_at":"2021-09-07T15:34:47.000Z","dependencies_parsed_at":"2023-01-11T21:02:29.838Z","dependency_job_id":null,"html_url":"https://github.com/treyhuffine/is-react","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/treyhuffine/is-react","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Fis-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Fis-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Fis-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Fis-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/treyhuffine","download_url":"https://codeload.github.com/treyhuffine/is-react/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/treyhuffine%2Fis-react/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269185726,"owners_count":24374634,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","react-components"],"created_at":"2024-11-20T15:53:43.163Z","updated_at":"2025-10-14T23:49:49.829Z","avatar_url":"https://github.com/treyhuffine.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Is React\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/is-react\"\u003e\n    \u003cimg alt=\"is-react?\" src=\"https://github.com/treyhuffine/is-react/raw/master/is-react.png\" width=\"300\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  Determine if a variable or expression is a valid element or component in \u003ca href=\"https://facebook.github.io/react\"\u003eReact\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/is-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/is-react.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/is-react\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/is-react.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/treyhuffine/is-react\"\u003e\u003cimg src=\"https://img.shields.io/travis/treyhuffine/is-react/master.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://packagephobia.com/result?p=is-react\"\u003e\u003cimg alt=\"install size\" src=\"https://packagephobia.com/badge?p=is-react\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\nA library to determine if a variable or an expression is a React element or component.\nFor a more thorough understanding, this [article](https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html) describes elements and components in React, and this [article](https://facebook.github.io/react/docs/jsx-in-depth.html)\ngives an understanding of the JSX syntax.\n\n### Sponsored by:\n- [Skilled.dev - Coding Interview Course](https://skilled.dev)\n- [gitconnected - The Developer Learning Community](https://gitconnected.com)\n\nNote: The React team now offers a package [react-is](https://www.npmjs.com/package/react-is) that provides similar functionality. I recommend checking that out as well to see if it's more suited for your needs.\n\n## Install\n\n`yarn add is-react` or `npm i --save is-react` to use the package.\n\n## Examples\n\nReal world:\n\n```javascript\nimport React from 'react';\nimport isReact from 'is-react';\n\nconst MyImageComponent = ({ SomeProp }) =\u003e {\n  if (typeof SomeProp === 'string') {\n    // assume it's the src for an image\n    return \u003cimg src={SomeProp} /\u003e;\n  } else if (isReact.component(SomeProp)) {\n    return \u003cSomeProp /\u003e;\n  } else if (isReact.element(SomeProp)) {\n    return SomeProp;\n  }\n\n  return null;\n};\n```\n\n---\n\nSamples:\n\n```javascript\n// Class Component\nclass Foo extends React.Component {\n  render() {\n    return \u003ch1\u003eHello\u003c/h1\u003e;\n  }\n}\n\nconst foo = \u003cFoo /\u003e;\n\n//Functional Component\nfunction Bar(props) {\n  return \u003ch1\u003eWorld\u003c/h1\u003e;\n}\nconst bar = \u003cBar /\u003e;\n\n// React Element\nconst header = \u003ch1\u003eTitle\u003c/h1\u003e;\n\n// Check\nisReact.compatible(Foo); // true\nisReact.component(Foo); // true\nisReact.classComponent(Foo); // true\nisReact.functionComponent(Foo); // false\nisReact.element(Foo); // false\n\nisReact.compatible(\u003cFoo /\u003e); // true\nisReact.component(\u003cFoo /\u003e); // false\nisReact.element(\u003cFoo /\u003e); // true\nisReact.DOMTypeElement(\u003cFoo /\u003e); // false\nisReact.compositeTypeElement(\u003cFoo /\u003e); // true\n\nisReact.compatible(Bar); // true\nisReact.component(Bar); // true\nisReact.classComponent(Bar); // false\nisReact.functionComponent(Bar); // true\nisReact.element(Bar); // false\n\nisReact.compatible(\u003cBar /\u003e); // true\nisReact.component(\u003cBar /\u003e); // false\nisReact.element(\u003cBar /\u003e); // true\nisReact.DOMTypeElement(\u003cBar /\u003e); // false\nisReact.compositeTypeElement(\u003cBar /\u003e); // true\n\nisReact.compatible(header); // true\nisReact.component(header); // false\nisReact.element(header); // true\nisReact.DOMTypeElement(header); // true\nisReact.compositeTypeElement(header); // false\n```\n\n## API\n\n`import isReact from 'is-react'` to use the package\n\nAll functions return a `boolean`. The primary functions you will most likely\nuse are `compatible()`, `element()`, and `component()`.\n\n#### `isReact.compatible()`\n\nDetermine if a variable or expression is compatible with React. Valid React\ncomponents and elements return `true`.\n\n#### `isReact.element()`\n\nDetermine if a variable or expression is a React element. Will return `true`\nfor both DOM type and Composite type components.\n\n#### `isReact.component()`\n\nDetermine if a variable or expression is a React component. Will return `true`\nfor both functional and class components.\n\n#### `isReact.classComponent()`\n\nDetermine if a variable or expression is a React class component.\n\n#### `isReact.functionComponent()`\n\nDetermine if a variable or expression is a React functional component.\n\n#### `isReact.DOMTypeElement()`\n\nDetermine if a variable or expression is a React DOM type element.\n\n#### `isReact.compositeTypeElement()`\n\nDetermine if a variable or expression is a React Composite type element.\n\n## Thanks!\n\nInspired by this Stackoverflow [answer](http://stackoverflow.com/a/41658173)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreyhuffine%2Fis-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftreyhuffine%2Fis-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftreyhuffine%2Fis-react/lists"}