{"id":25828365,"url":"https://github.com/alphajoop/yombal-ui","last_synced_at":"2025-07-15T07:18:17.554Z","repository":{"id":217158622,"uuid":"743216849","full_name":"alphajoop/yombal-ui","owner":"alphajoop","description":"Yombal UI is a library that provides ready-to-use React components for faster development.","archived":false,"fork":false,"pushed_at":"2024-03-01T19:52:29.000Z","size":24,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-09T17:52:36.542Z","etag":null,"topics":["library","reactjs","yombal-ui"],"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/alphajoop.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":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-14T17:20:40.000Z","updated_at":"2025-02-25T15:00:28.000Z","dependencies_parsed_at":"2024-01-19T12:36:32.372Z","dependency_job_id":"174442f3-4fbd-40c5-b64f-09a07cbb7a11","html_url":"https://github.com/alphajoop/yombal-ui","commit_stats":null,"previous_names":["alphajoop/yombal-ui"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/alphajoop/yombal-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fyombal-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fyombal-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fyombal-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fyombal-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alphajoop","download_url":"https://codeload.github.com/alphajoop/yombal-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alphajoop%2Fyombal-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263437341,"owners_count":23466367,"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":["library","reactjs","yombal-ui"],"created_at":"2025-02-28T17:38:05.574Z","updated_at":"2025-07-04T03:06:28.379Z","avatar_url":"https://github.com/alphajoop.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Yombal UI\n\nWelcome to Yombal UI, a library that provides ready-to-use React components for faster development.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Theme Toggle](#theme-toggle)\n- [Menu Button](#menu-button)\n\n## Installation\n\nTo install Yombal UI, you can use npm or yarn:\n\n```bash\n# Using npm\nnpm install yombal-ui\n\n# Using yarn\nyarn add yombal-ui\n```\n\n## Usage\n\nImport the components you need from Yombal UI and use them in your React application:\n\n```jsx\nimport { ThemeToggle, OtherComponent } from 'yombal-ui';\n\nfunction App() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eYour App\u003c/h1\u003e\n      \u003cThemeToggle theme={true} onClick={() =\u003e console.log('Theme toggled!')} /\u003e\n      \u003cOtherComponent /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n## Theme Toggle\n\nYombal UI provides a ThemeToggle component that you can use to add a theme toggle button to your application. Here's an example of how to use it:\n\n```jsx\nimport { useState } from 'react';\nimport { ThemeToggle } from 'yombal-ui';\n\nfunction App() {\n  const [isDarkMode, setDarkMode] = useState(false);\n\n  const toggleDarkMode = () =\u003e {\n    setDarkMode(!isDarkMode);\n    // Add logic to update your application's theme\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eYour App\u003c/h1\u003e\n      \u003cThemeToggle\n        theme={isDarkMode}\n        onClick={toggleDarkMode}\n        size={24}\n        shouldScaleOnHover={true}\n        className=\"custom-styles\"\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Props\n\nThe ThemeToggle component accepts the following props:\n\n1. `theme`: A boolean representing the current theme (true for dark, false for light).\n2. `onClick`: A function to be called when the button is clicked, typically used to toggle the theme.\n3. `size`: Optional. The size of the toggle button icon.\n4. `shouldScaleOnHover`: Optional. Enable or disable the hover scaling effect on the button.\n5. `className: Optional`. Additional CSS classes to customize the button's appearance.\n\nFeel free to customize the ThemeToggle component by adjusting the size, shouldScaleOnHover, and applying custom styles using the className prop. Tailor it to seamlessly integrate into your application's design and provide an enhanced user experience.\n\n## Menu Button\n\nThe MenuButton component in Yombal UI allows you to easily create a responsive hamburger menu button for your navigation. This button can be used to toggle the visibility of a menu or trigger other actions in your application.\n\n```jsx\nimport { useState } from 'react';\nimport { MenuButton } from 'yombal-ui';\n\nfunction App() {\n  const [isMenuOpen, setMenuOpen] = useState(false);\n\n  const handleMenuClick = () =\u003e {\n    setMenuOpen(!isMenuOpen);\n    // Add logic for handling menu visibility\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eYour App\u003c/h1\u003e\n      \u003cMenuButton onClick={handleMenuClick} isOpen={isMenuOpen} size={24} /\u003e\n    \u003c/div\u003e\n  );\n}\n\nexport default App;\n```\n\n### Props\n\nThe `MenuButton` component accepts the following props:\n\n1. `onClick`: A function to be called when the button is clicked.\n2. `size`: Optional. The size of the button icon.\n3. `isOpen`: A boolean indicating whether the menu is currently open or closed.\n4. `className`: Optional. Additional CSS classes to customize the button's appearance.\n\nFeel free to customize the component and its styles to fit your application's design. The button will automatically transition between the menu and close icons based on the isOpen prop.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphajoop%2Fyombal-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falphajoop%2Fyombal-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falphajoop%2Fyombal-ui/lists"}