{"id":19006900,"url":"https://github.com/yowainwright/react-prop-renderer","last_synced_at":"2025-07-10T09:39:03.011Z","repository":{"id":39182433,"uuid":"418824451","full_name":"yowainwright/react-prop-renderer","owner":"yowainwright","description":"Render endpoints on the fly with React. WIP🧪","archived":false,"fork":false,"pushed_at":"2024-08-01T13:12:06.000Z","size":1429,"stargazers_count":4,"open_issues_count":5,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-22T19:52:14.073Z","etag":null,"topics":["jest","react","testing","testing-tools"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yowainwright.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-10-19T07:52:40.000Z","updated_at":"2024-05-05T05:33:49.000Z","dependencies_parsed_at":"2023-12-29T08:27:44.881Z","dependency_job_id":"64d98302-20f2-4eb9-a5dc-436b30c4d3a3","html_url":"https://github.com/yowainwright/react-prop-renderer","commit_stats":null,"previous_names":["yowainwright/react-endpoint-renderer"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/yowainwright/react-prop-renderer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Freact-prop-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Freact-prop-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Freact-prop-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Freact-prop-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yowainwright","download_url":"https://codeload.github.com/yowainwright/react-prop-renderer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yowainwright%2Freact-prop-renderer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264094964,"owners_count":23556735,"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","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":["jest","react","testing","testing-tools"],"created_at":"2024-11-08T18:35:00.397Z","updated_at":"2025-07-10T09:39:02.987Z","avatar_url":"https://github.com/yowainwright.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Prop Renderer 🧪\n\nRender your props on the fly.\n\n## Synopsis\n\nPerhaps, your code is always perfect. Perhaps, your props types and api endpoint shapes are always exactly as designed. Perhaps your calculations are always what you expect after various transformations. If so, React Prop Renderer is **not** for you!\n\n**React Prop Renderer** makes it easy to print out props so that they can be tested or reviewed easily.\n\nIn slightly more detail, **React Prop Renderer** is a [React portal](https://reactjs.org/docs/portals.html) that prints a [tree data structure](https://en.wikipedia.org/wiki/Tree_(data_structure)#:~:text=A%20tree%20data%20structure%20can,none%20points%20to%20the%20root.) of components expressing props and their values. From there, you can do what you'd like!\n\n## Install\n\n```sh\nnpm install react-prop-renderer -S\n```\n\n## Usage\n\nAfter installing React Prop Renderer, import it and use it to your liking.\n\nIt can be imported as a `default` or as the named component itself.\n\n```js\nimport PropsRenderer from 'react-prop-renderer'\n// or\nimport { PropsRenderer } from 'react-prop-renderer'\n```\n\nBecause it renders in a React Portal, you can use (reference) it anywhere in your React app!\n\n```jsx\nimport React, { useEffect, useState } from 'react';\nimport { PropsRenderer } from 'react-prop-renderer'\nimport { SomeComponent } from './components/SomeComponent'\n\nexport const SomeParentComponent = () =\u003e {\n  return (\n    \u003cSomeComponent\u003e\n      {/*\n        * You can use the PropsRenderer within a component (like below)\n        * You can use variables to only render (show) the endpoint when you want\n      */}\n      {isWhiteListedHost \u0026\u0026 isRenderingEndpoint \u0026\u0026 Object.keys(data).length \u003e 0 \u0026\u0026 \u003cPropsRenderer endpoint={data} /\u003e}\n    \u003c/SomeComponent\u003e\n  )\n}\n\nexport default SomeParentComponent\n```\n\nHere's a quick pseudo code example/idea\n\n```jsx\nimport React, { useEffect, useState } from 'react';\nimport { PropsRenderer } from 'react-prop-renderer'\n\nexport function SomeAwesomeEndpointSubmission({ isWhiteListedHost }) {\n  const isRenderingEndpoint = new URLSearchParams(search).get(\"isRenderingEndpoint\")\n  const [data, setData] = useState({});\n\n  function handleSubmit async (endpoint) {\n    const updatedData = await endpoind();\n    setData(updatedData);\n  }\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton type='submit' onClick={handClick}\u003eSubmit Endpoint\u003c/button\u003e\n      {isWhiteListedHost \u0026\u0026 isRenderingEndpoint \u0026\u0026 Object.keys(data).length \u003e 0 \u0026\u0026 \u003cPropsRenderer endpoint={data} /\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\nAnd yes, you can use the PropsRenderer to render data besides endpoints!\n\n```jsx\nimport React, { useEffect, useState } from 'react';\nimport { PropsRenderer } from 'react-prop-renderer'\nimport { SomeComponent } from './components/SomeComponent'\n\nexport const SomeParentComponent = () =\u003e {\n  return (\n    \u003cSomeComponent\u003e\n      {whatDataIsThis \u0026\u0026 Object.keys(whatDataIsThis).length \u003e 0 \u0026\u0026 \u003cPropsRenderer endpoint={whatDataIsThis} /\u003e}\n    \u003c/SomeComponent\u003e\n  )\n}\n\nexport default SomeParentComponent\n```\n\nHope to provide better documentation soon(ish)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyowainwright%2Freact-prop-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyowainwright%2Freact-prop-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyowainwright%2Freact-prop-renderer/lists"}