{"id":35094546,"url":"https://github.com/hodev-dev/react-logic-components","last_synced_at":"2026-04-14T04:31:23.613Z","repository":{"id":105988849,"uuid":"288411153","full_name":"hodev-dev/react-logic-components","owner":"hodev-dev","description":"using JSX as Logic","archived":false,"fork":false,"pushed_at":"2020-08-19T06:50:36.000Z","size":351,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-29T07:23:37.050Z","etag":null,"topics":["component","jsx","jsx-renderer","react","react-native","reactive","reactjs","redux"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/hodev-dev.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2020-08-18T09:23:21.000Z","updated_at":"2020-08-19T06:54:15.000Z","dependencies_parsed_at":null,"dependency_job_id":"d83c5b3c-dcbd-4a96-b316-ee470a16a909","html_url":"https://github.com/hodev-dev/react-logic-components","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hodev-dev/react-logic-components","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hodev-dev%2Freact-logic-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hodev-dev%2Freact-logic-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hodev-dev%2Freact-logic-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hodev-dev%2Freact-logic-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hodev-dev","download_url":"https://codeload.github.com/hodev-dev/react-logic-components/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hodev-dev%2Freact-logic-components/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31782736,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-14T02:24:21.117Z","status":"ssl_error","status_checked_at":"2026-04-14T02:24:20.627Z","response_time":153,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["component","jsx","jsx-renderer","react","react-native","reactive","reactjs","redux"],"created_at":"2025-12-27T15:06:07.513Z","updated_at":"2026-04-14T04:31:23.602Z","avatar_url":"https://github.com/hodev-dev.png","language":"TypeScript","readme":"# React Logic Components\n\n# install\n**no need to use npm** just copy `src/Logics` folder drop into react project because it has `Zero` dependecy\n## IF Component\nrender jsx if variable and check return `\u003cTHEN\u003e` base on given logic otherwise return `\u003cELSE\u003e`\nif there is no `\u003cELSE\u003e` return null\n```js\nimport IF, { THEN, ELSE } from './Logics/IF';\n```\n```html\n\u003cIF variable={true} logic=\"===\" check={true}\u003e\n    \u003cTHEN\u003e\n        do something\n    \u003c/THEN\u003e\n    \u003cELSE\u003e\n        do something else\n    \u003c/ELSE\u003e\n\u003c/IF\u003e\n```\n# SWITCH Component\nrender if case equal to variable if didn't find any case it will render default\n```js\nimport SWITCH, { CASE, DEFAULT } from './Logics/Switch';\n```\n```html\n\u003cSWITCH variable={'hosein'}\u003e\n    \u003cCASE case=\"ali\"\u003erender ali\u003c/CASE\u003e\n    \u003cCASE case=\"reza\"\u003erender reza\u003c/CASE\u003e\n    \u003cDEFAULT\u003erender if no casee found\u003c/DEFAULT\u003e\n\u003c/SWITCH\u003e\n```\n# FOREACH Component\nmap over data and inject each data `as` props with given name into component \n```js\nimport FOREACH from './Logics/ForEach';\n```\n```html\n\u003cFOREACH data={['red', 'blue', 'green']} as={\"color\"}\u003e\n    \u003cH1 color /\u003e\n\u003c/FOREACH\u003e\n```\n\n# Performance\nthere may be some performance overhead but i didn't notice anything noticable because react is slow by default on render more than 100 element at same time and it considered to be bad practice (virtualized list) for less than that it should be fine","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhodev-dev%2Freact-logic-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhodev-dev%2Freact-logic-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhodev-dev%2Freact-logic-components/lists"}