{"id":20326995,"url":"https://github.com/ashish-simplecoder/classic-react-components","last_synced_at":"2025-04-11T20:07:21.255Z","repository":{"id":188286880,"uuid":"631321587","full_name":"Ashish-simpleCoder/classic-react-components","owner":"Ashish-simpleCoder","description":"🚀 A great collections of React utility components","archived":false,"fork":false,"pushed_at":"2024-08-16T13:34:25.000Z","size":113,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-28T22:20:35.768Z","etag":null,"topics":["component-library","components-library","jest","react","resusable-components","typescript"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/classic-react-components","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/Ashish-simpleCoder.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-04-22T16:45:26.000Z","updated_at":"2024-08-16T13:34:00.000Z","dependencies_parsed_at":"2023-08-14T18:46:50.419Z","dependency_job_id":"632d5f3f-64be-4860-92ed-a454851e1c0e","html_url":"https://github.com/Ashish-simpleCoder/classic-react-components","commit_stats":null,"previous_names":["ashish-simplecoder/classic-react-components"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashish-simpleCoder%2Fclassic-react-components","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashish-simpleCoder%2Fclassic-react-components/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashish-simpleCoder%2Fclassic-react-components/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ashish-simpleCoder%2Fclassic-react-components/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ashish-simpleCoder","download_url":"https://codeload.github.com/Ashish-simpleCoder/classic-react-components/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224684677,"owners_count":17352584,"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":["component-library","components-library","jest","react","resusable-components","typescript"],"created_at":"2024-11-14T19:46:14.958Z","updated_at":"2024-11-14T19:46:15.715Z","avatar_url":"https://github.com/Ashish-simpleCoder.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🚀 classic-react-components\n\n- A Simple React Library of `Utility Components`.\n- Write jsx in `maintainable` and `readable` way, and fun too.\n\n\n\u003cbr /\u003e\n\u003cp align=\"left\"\u003e\n  \u003ca href=\"https://badge.fury.io/Ashish-simpleCoder/classic-react-components\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/classic-react-components.svg\" alt=\"npm version\"\u003e\n  \u003c/a\u003e\n    \u003cimg src=\"https://img.shields.io/badge/Licence-MIT-success\" alt=\"MIT license.\" /\u003e\n  \u003ca href=\"https://github.com/Ashish-simpleCoder/classic-react-components/actions/workflows/test.yml\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/Ashish-simpleCoder/classic-react-components/test.yml?label=Test\u0026logo=GitHub\" alt=\"Test\" /\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/Ashish-simplecoder/classic-react-components/actions/workflows/main.yml\"\u003e\n    \u003cimg src=\"https://img.shields.io/github/actions/workflow/status/Ashish-simpleCoder/classic-react-components/main.yml?label=CI\u0026logo=GitHub\" alt=\"Jest is released under the MIT license.\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Features\n\n- Comes with treeshaking\n- Typescript support\n- Small bundle size\n- Minimal and Easy to use\n\n## Installation\n\nFor npm users\n\n```bash\n$ npm install classic-react-components\n```\n\nFor pnpm users\n\n```bash\n$ pnpm install classic-react-components\n```\n\nFor yarn users\n\n```bash\n$ yarn add classic-react-components\n```\n\n## Components\n\n-  [If](#if)\n-  [Then](#then)\n-  [Else](#else)\n-  [For](#for)\n-  [Switch](#switch)\n\n### If\n\n| Prop      |   Type    | Required | Default Value | Description                                                                                  |\n| --------- | :-------: | :------: | :-----------: | -------------------------------------------------------------------------------------------- |\n| condition |    any    |    ❌    |     false     | Based on evaluation of the condition flag the component will return null or children         |\n| children  | ReactNode |    ❌    |     null      | To render the children                                                                       |\n| suspense  |  boolean  |    ❌    |     false     | Needed to show fallback until its children have finished loading                             |\n| fallback  | ReactNode |    ❌    |     null      | Fallback needed to show until the component is loaded fully. Needed for suspensed components |\n\n### Working\n\n-  Based on the condition the children are rendered.\n-  If the condition is true then the childeren will render otherwise it will return null.\n\n-  For one children\n\n   -  If condition is true then children will be rendered.\n   -  If condition is false then null gets returned.\n\n-  For multiple children\n   -  If conndition is true then the first children will rendered.\n   -  Otherwise the all of the children will be rendered excluding the first children.\n\n### Example\n\n```tsx\nimport { If } from 'classic-react-components'\n\nexport default function YourComponent() {\n   return (\n      \u003cdiv\u003e\n         {/* Passing only one children and a condition prop */}\n         \u003cIf codition={true}\u003e\n            \u003ch1\u003eit will render.\u003c/h1\u003e\n         \u003c/If\u003e\n\n         {/* Passing more than one children and a truthy condition prop */}\n         \u003cIf codition={false}\u003e\n            \u003ch1\u003eit will not render\u003c/h1\u003e\n            \u003ch2\u003eit will render. As condition it falsy\u003c/h2\u003e\n         \u003c/If\u003e\n\n         {/* Passing more than one children and a falsy condition prop */}\n         \u003cIf codition={falsy}\u003e\n            \u003ch1\u003eit will not render\u003c/h1\u003e\n            \u003ch2\u003eit will render. As condition it falsy.\u003c/h2\u003e\n            \u003ch2\u003eit will also render\u003c/h2\u003e\n         \u003c/If\u003e\n      \u003c/div\u003e\n   )\n}\n```\n\n### Usage with Suspense\n\n```tsx\nimport { If, Then, Else } from 'classic-react-components'\nimport { lazy } from 'react'\n\nconst YourLazyComponent = lazy(() =\u003e import('./YourLazyComponent'))\n\nexport default function YourComponent() {\n   return (\n      \u003cdiv\u003e\n         {/* Passing two children, condition and suspense props */}\n         \u003cIf codition={false} suspense\u003e\n            {/* This component will only download when the condition evaluates to true.\n             Here condition is falsy, it will not be downloaded. */}\n            \u003cThen\u003e\n               \u003cYourLazyComponent /\u003e\n            \u003c/Then\u003e\n            \u003cElse\u003e\n               \u003ch2\u003ethis is will render\u003c/h2\u003e\n            \u003c/Else\u003e\n         \u003c/If\u003e\n      \u003c/div\u003e\n   )\n}\n```\n\n### Then\n\n| Prop     |   Type    | Required | Default Value | Description                 |\n| -------- | :-------: | :------: | :-----------: | --------------------------- |\n| children | ReactNode |    ❌    |     null      | Renders the passed children |\n\n### Working\n\n-  It should be used in-conjunction with `If` commponent.\n-  It renders the passed children.\n\n### Example\n\n```tsx\nimport { If, Then } from 'classic-react-components'\n\nexport default function YourComponent() {\n   return (\n      \u003cdiv\u003e\n         \u003cIf codition={true}\u003e\n            \u003cThen\u003e\n               \u003ch1\u003ethis will render.\u003c/h1\u003e\n            \u003c/Then\u003e\n         \u003c/If\u003e\n      \u003c/div\u003e\n   )\n}\n```\n\n### Else\n\n| Prop     |   Type    | Required | Default Value | Description                 |\n| -------- | :-------: | :------: | :-----------: | --------------------------- |\n| children | ReactNode |    ❌    |     null      | Renders the passed children |\n\n### Working\n\n-  It should be used in-conjunction with `If` commponent.\n-  It renders the passed children.\n\n### Example\n\n```tsx\nimport { If, Then, Else } from 'classic-react-components'\n\nexport default function YourComponent() {\n   return (\n      \u003cdiv\u003e\n         \u003cIf codition={2 + 2 == 4}\u003e\n            \u003cThen\u003e\n               \u003ch1\u003ethis will render.\u003c/h1\u003e\n            \u003c/Then\u003e\n            \u003cElse\u003e\n               \u003ch1\u003ethis will not render.\u003c/h1\u003e\n            \u003c/Else\u003e\n         \u003c/If\u003e\n      \u003c/div\u003e\n   )\n}\n```\n\n### For\n\n| Prop     |   Type    | Required | Default Value | Description                                    |\n| -------- | :-------: | :------: | :-----------: | ---------------------------------------------- |\n| data     |   Array   |    ❌    |   undefined   | Needed for mapping                             |\n| children | ReactNode |    ❌    |     null      | Renders the `JSX` returned from child function |\n\n### Working\n\n-  Replacement for Array.map().\n-  Used to iterate over an array of items and renders the `JSX` based on the provided child function.\n\n### Example\n\n```tsx\nimport { For } from 'classic-react-components'\nimport CardComponent from './CardComponent'\n\nexport default function YourComponent() {\n   const Data = [\n      { id: 1, course: 'Javascript' },\n      { id: 2, course: 'React' },\n   ]\n   return (\n      \u003cdiv\u003e\n         \u003cFor data={Data}\u003e\n            {(item, index) =\u003e {\n               return \u003cCardComponent key={item.id}\u003e{item.course}\u003c/CardComponent\u003e\n            }}\n         \u003c/For\u003e\n      \u003c/div\u003e\n   )\n}\n```\n\n### Switch\n\n| Prop     |   Type    | Required | Default Value | Description                                                      |\n| -------- | :-------: | :------: | :-----------: | ---------------------------------------------------------------- |\n| item     |    any    |    ❌    |   undefined   | The value of Switch                                              |\n| children | ReactNode |    ✅    |       -       | Renders the children of matched case if found, else default case |\n\n### Working\n\n-  Renders the children of particular matched case for given prop `item(switch value)`.\n-  If no case matches for given prop `item`, the `Default` case will be rendered.\n\n\u003e **Note:** The order of Default Case does not matter.\n\n### Example\n\n```tsx\nimport { Switch } from 'classic-react-components'\nimport CardComponent from './CardComponent'\n\nexport default function YourComponent({ item }: { item: 'coding' | 'sleep' }) {\n   return (\n      \u003cdiv\u003e\n         \u003cSwitch item={item}\u003e\n            {({ Case, Default }) =\u003e {\n               return (\n                  \u003c\u003e\n                     \u003cCase value='coding'\u003e\n                        \u003cdiv\u003ecoing-case\u003c/div\u003e\n                     \u003c/Case\u003e\n                     \u003cCase value='sleep'\u003e\n                        \u003cdiv\u003esleep-case\u003c/div\u003e\n                     \u003c/Case\u003e\n                     \u003cDefault\u003e\n                        \u003cdiv\u003ethis is default case\u003c/div\u003e\n                     \u003c/Default\u003e\n                  \u003c/\u003e\n               )\n            }}\n         \u003c/Switch\u003e\n      \u003c/div\u003e\n   )\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashish-simplecoder%2Fclassic-react-components","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fashish-simplecoder%2Fclassic-react-components","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fashish-simplecoder%2Fclassic-react-components/lists"}