{"id":21196738,"url":"https://github.com/react-widgets/react_widgets","last_synced_at":"2026-02-08T00:02:39.935Z","repository":{"id":231639095,"uuid":"782296490","full_name":"react-widgets/react_widgets","owner":"react-widgets","description":"This is package that provides templates that can significantly reduce CSS development works in a react development environment.","archived":false,"fork":false,"pushed_at":"2025-01-27T12:38:39.000Z","size":480,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-20T15:45:03.813Z","etag":null,"topics":["layout","react","react-package","template","widget"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@web-package/react-widgets","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/react-widgets.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,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-04-05T02:38:09.000Z","updated_at":"2025-01-27T12:38:43.000Z","dependencies_parsed_at":"2024-06-01T17:21:52.718Z","dependency_job_id":"e696d452-e9eb-4b64-9cdf-ab7905f82d32","html_url":"https://github.com/react-widgets/react_widgets","commit_stats":null,"previous_names":["mttankkeo/react_widgets","mttankkeo/preact_widgets"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/react-widgets/react_widgets","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/react-widgets","download_url":"https://codeload.github.com/react-widgets/react_widgets/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/react-widgets%2Freact_widgets/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29213478,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T23:58:20.073Z","status":"ssl_error","status_checked_at":"2026-02-07T23:58:07.729Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: 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":["layout","react","react-package","template","widget"],"created_at":"2024-11-20T19:41:12.654Z","updated_at":"2026-02-08T00:02:39.917Z","avatar_url":"https://github.com/react-widgets.png","language":"TypeScript","readme":"\u003cdiv align=\"center\"\u003e\n    \u003cimg src=\"https://github.com/user-attachments/assets/f576cb2c-a1e1-4f54-af04-64cd17284282\"\u003e\n    \u003ch1\u003eReact Widgets\u003c/h1\u003e\n    \u003ctable\u003e\n        \u003cthead\u003e\n          \u003ctr\u003e\n            \u003cth\u003eVersion\u003c/th\u003e\n            \u003cth\u003ev1.0.0-beta11\u003c/th\u003e\n          \u003c/tr\u003e\n        \u003c/tbody\u003e\n    \u003c/table\u003e\n    You need to learn more about the \u003ca href=\"https://github.com/react-widgets/react_widgets-router\"\u003ereact-widgets-router\u003c/a\u003e package that is the extension of this package!\n\u003c/div\u003e\n\n# Introduction\nThis package provides templates that significantly reduce CSS development work in a React environment, while enhancing readability and maintainability by consolidating style definitions. It fosters a more suitable development environment for Declarative UI. Additionally, it includes widgets designed to improve performance.\n\n\u003e [!NOTE]\n\u003e Other widgets will be added sequentially in the README.md, and detailed usage will be covered through the related website once this package is officially released.\n\n\u003e Consider integrating not only business logic but also design logic into script code, See Also, If you want the change-log by version for this package. refer to [Change Log](CHANGELOG.md) for details.\n\n```tsx\nreturn \u003cBox backgroundColor=\"red\"\u003eHello, World\u003c/Box\u003e\n```\n\n```tsx\nreturn (\n    \u003cScrollable.Horizontal\u003e\n        \u003cRow gap=\"5px\" padding=\"15px\"\u003e...[children]\u003c/Row\u003e\n    \u003c/Scrollable.Horizontal\u003e\n)\n```\n\n# Preview\nThe image below is a simple use gif of [Quark Icons](https://quarkicons.com/) and a website created using @web-package/react-widgets and its extension, @web-package/react-widgets-router.\n\n![preview](https://github.com/user-attachments/assets/cd1b147b-3043-496f-9ebc-e76b634d468c)\n\n# Usage\n\n## How to make responsive animated size?\nInterestingly, even when wrapped with this widget, it does not impact the layout calculations of existing child elements. This is because the React widget package is designed to assist with layout calculations while striving to minimize any impact on the existing layout.\n\n```tsx\nreturn (\n    \u003cAnimatedSize duration=\"0.3s\"\u003e\n        \u003cBox\u003eHello, World 1\u003c/Box\u003e\n        \u003cBox\u003eHello, World 2\u003c/Box\u003e \u003c!-- Dynamic inserted --\u003e\n        \u003cBox\u003eHello, World 3\u003c/Box\u003e \u003c!-- Dynamic inserted --\u003e\n    \u003c/AnimatedSize\u003e\n)\n```\n\n### Simple Preview\n![preview](https://github.com/user-attachments/assets/c0a87919-9703-4ead-9025-e6d43d1e57e3)\n\n## How to make responsive folding animation?\nYou can be using the `AnimatedFoldable.Vertical` or `AnimatedFoldable.Horizontal` widgets to resolve it.\n\n```tsx\nfunction ExampleComponent() {\n    const [visible, setVisible] = useState(true);\n\n    return (\u003c\u003e\n        \u003cbutton onClick={() =\u003e setVisible(!visible)}\u003eFold\u003c/button\u003e\n        { /* or using AnimatedFoldable.Vertical widget */ }\n        \u003cAnimatedFoldable.Horizontal visible={visible} duration=\"0.3s\"\u003e\n            \u003cRow\u003e\n                \u003cBox\u003eHello, World 1\u003c/Box\u003e\n                \u003cBox\u003eHello, World 2\u003c/Box\u003e\n                \u003cBox\u003eHello, World 3\u003c/Box\u003e\n            \u003c/Row\u003e\n        \u003c/AnimatedFoldable.Horizontal\u003e\n    \u003c/\u003e)\n}\n```\n\n### Simple Preview\n![preview](https://github.com/user-attachments/assets/d3959d24-37f5-44b0-b659-08b4428e5092)\n\n## How to animate child component changes?\nIf you want to animate dynamic changes in a child component (e.g. when transitioning out of a loading screen or in other similar cases), you can easily achieve this by simply using the `AnimatedTransition` widget.\n\n\u003e See Also, You don't need to forward the `value` property value by unconditionally, but it helps define more clearly whether the child component state has changed.\n\n```tsx\nexport default function ExampleComponent() {\n    const [count, setCount] = useState(0);\n\n    // You can be using like this:\n    // \n    // { // when using CSS animation\n    //     fadeIn: \"keyframe-name\"\n    //     fadeOut: \"keyframe-name\"\n    // }\n    return (\n        \u003cColumn size=\"100%\"\u003e\n            \u003cbutton onClick={() =\u003e setCount(count + 1)}\u003eCount Up\u003c/button\u003e\n            \u003cAnimatedTransition value={count} animation={{\n                duration: \"0.3s\",\n                fadeIn:  {from: {opacity: 0}, to: {opacity: 1}},\n                fadeOut: {from: {opacity: 1}, to: {opacity: 0}}\n            }}\u003e\n                \u003cBox\u003eHello, World! {count}\u003c/Box\u003e\n            \u003c/AnimatedTransition\u003e\n        \u003c/Column\u003e\n    )\n}\n```\n\n### Simple Preview\n\u003e fadeIn:  {from: {opacity: 0, transform: \"translateY(100%)\"}, to: {opacity: 1, transform: \"\"}},\u003cbr\u003e\n\u003e fadeOut: {from: {opacity: 1, transform: \"\"}, to: {opacity: 0, transform: \"translateY(-100%)\"}}\n\n![ezgif-5-0d105f42bd](https://github.com/user-attachments/assets/c8696a97-adb1-4e24-a9f7-e3b7d52a7c0b)\n\n## How to make Tab Navigation?\nYou can be using the `TabNavigation.Vertical` or `TabNavigation.Horizontal` widgets to resolve it.\n\n```tsx\nexport default function ExampleComponent() {\n    const [index, setIndex] = useState(0);\n\n    return (\n        \u003cTabNavigation.Horizontal index={index}  gap=\"15px\" duration=\"0.5s\"\u003e\n            \u003ch1 onClick={() =\u003e setIndex(0)}\u003eItem 1\u003c/h1\u003e\n            \u003ch1 onClick={() =\u003e setIndex(1)}\u003eItem 2\u003c/h1\u003e\n            \u003ch1 onClick={() =\u003e setIndex(2)}\u003eItem 3\u003c/h1\u003e\n        \u003c/TabNavigation.Horizontal\u003e\n    )\n}\n```\n\n### Simple Preview\n![ezgif-6-50460d4d25](https://github.com/user-attachments/assets/7312ac10-0ca2-404b-acb7-3437c89d8f82)\n\n## How to make responsive grid?\nYou can be using the `ConstraintBuilder` with `Grid` widgets to resolve it.\n\n```tsx\nreturn (\n    \u003cConstraintBuilder\u003cnumber\u003e\n        constraints={[\n            new Constraint(1000, Infinity, 3),\n            new Constraint(600, 1000, 2),\n            new Constraint(-Infinity, 600, 1)\n        ]}\n        /* You need to set this option accordingly according to the situation. */\n        usememo={true}\n        builder={(value: number) =\u003e {\n            return (\n                \u003cGrid gap=\"5px\" rowCount={value}\u003e\n                    \u003cText\u003e1\u003c/Text\u003e\n                    \u003cText maxLine={1}\u003e2\u003c/Text\u003e\n                    \u003cText type={TextType.h1} maxLine={1}\u003e3\u003c/Text\u003e\n                    \u003cText type={TextType.h2} maxLine={2}\u003e4\u003c/Text\u003e\n                    \u003cText type={TextType.h3} maxLine={3}\u003e5\u003c/Text\u003e\n                \u003c/Grid\u003e\n            );\n        }\n    } /\u003e\n)\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widgets%2Freact_widgets","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Freact-widgets%2Freact_widgets","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Freact-widgets%2Freact_widgets/lists"}