https://github.com/alphajoop/yombal-ui
Yombal UI is a library that provides ready-to-use React components for faster development.
https://github.com/alphajoop/yombal-ui
library reactjs yombal-ui
Last synced: 12 months ago
JSON representation
Yombal UI is a library that provides ready-to-use React components for faster development.
- Host: GitHub
- URL: https://github.com/alphajoop/yombal-ui
- Owner: alphajoop
- License: mit
- Created: 2024-01-14T17:20:40.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-03-01T19:52:29.000Z (over 2 years ago)
- Last Synced: 2025-06-09T17:52:36.542Z (about 1 year ago)
- Topics: library, reactjs, yombal-ui
- Language: TypeScript
- Homepage:
- Size: 23.4 KB
- Stars: 7
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Yombal UI
Welcome to Yombal UI, a library that provides ready-to-use React components for faster development.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Theme Toggle](#theme-toggle)
- [Menu Button](#menu-button)
## Installation
To install Yombal UI, you can use npm or yarn:
```bash
# Using npm
npm install yombal-ui
# Using yarn
yarn add yombal-ui
```
## Usage
Import the components you need from Yombal UI and use them in your React application:
```jsx
import { ThemeToggle, OtherComponent } from 'yombal-ui';
function App() {
return (
Your App
console.log('Theme toggled!')} />
);
}
export default App;
```
## Theme Toggle
Yombal 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:
```jsx
import { useState } from 'react';
import { ThemeToggle } from 'yombal-ui';
function App() {
const [isDarkMode, setDarkMode] = useState(false);
const toggleDarkMode = () => {
setDarkMode(!isDarkMode);
// Add logic to update your application's theme
};
return (
Your App
);
}
export default App;
```
### Props
The ThemeToggle component accepts the following props:
1. `theme`: A boolean representing the current theme (true for dark, false for light).
2. `onClick`: A function to be called when the button is clicked, typically used to toggle the theme.
3. `size`: Optional. The size of the toggle button icon.
4. `shouldScaleOnHover`: Optional. Enable or disable the hover scaling effect on the button.
5. `className: Optional`. Additional CSS classes to customize the button's appearance.
Feel 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.
## Menu Button
The 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.
```jsx
import { useState } from 'react';
import { MenuButton } from 'yombal-ui';
function App() {
const [isMenuOpen, setMenuOpen] = useState(false);
const handleMenuClick = () => {
setMenuOpen(!isMenuOpen);
// Add logic for handling menu visibility
};
return (
Your App
);
}
export default App;
```
### Props
The `MenuButton` component accepts the following props:
1. `onClick`: A function to be called when the button is clicked.
2. `size`: Optional. The size of the button icon.
3. `isOpen`: A boolean indicating whether the menu is currently open or closed.
4. `className`: Optional. Additional CSS classes to customize the button's appearance.
Feel 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.