https://github.com/kristian240/chakra-ui-bottom-navigation
Bottom navigation component built for Chakra UI
https://github.com/kristian240/chakra-ui-bottom-navigation
bottom-navigation chakra-ui chakra-ui-react
Last synced: 11 months ago
JSON representation
Bottom navigation component built for Chakra UI
- Host: GitHub
- URL: https://github.com/kristian240/chakra-ui-bottom-navigation
- Owner: kristian240
- Created: 2021-07-03T05:38:56.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-09-14T17:37:51.000Z (almost 4 years ago)
- Last Synced: 2024-08-09T09:32:33.994Z (almost 2 years ago)
- Topics: bottom-navigation, chakra-ui, chakra-ui-react
- Language: TypeScript
- Homepage:
- Size: 557 KB
- Stars: 12
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Chakra-UI Bottom Navigation
Chakra-UI Bottom Navigation is an accessible and reusable component built to work seamlessly with [Chakra-UI](https://chakra-ui.com/).
Check the [demo](https://codesandbox.io/s/chakra-ui-bottom-navigation-example-kp7hk?file=/src/index.tsx)
## Features
- Multiple variants
- Easily modifed
- Composable
- And more...
## Install
```bash
npm install chakra-ui-bottom-navigation
# or
yarn add chakra-ui-bottom-navigation
```
> NOTE: this component requries Chakra-UI >= v1.0.0 to work properly. You can follow [instructions for installing Chakara-UI](https://chakra-ui.com/docs/getting-started) or [instructions for migrating to v1](https://chakra-ui.com/docs/migration)
## Theme
By default, this component comes with some predefined styles. To utilize this styles add them to theme overrides.
```jsx
import { ChakraProvider, extendTheme } from '@chakra-ui/react';
import { BottomNavigationStyleConfig as BottomNavigation } from 'chakra-ui-bottom-navigation';
const theme = extendTheme({
components: {
BottomNavigation,
},
});
export const App = () => {
return (
);
};
```
### WithDefaultTheme
If you want to expand defualt styles of the component, use the `withDefaultStyles` HOC. Component override follows the same structure as all other Chakra-UI components. [Check the guide here.](https://chakra-ui.com/docs/theming/component-style#styling-multipart-components)
```jsx
import { withDefaultStyles } from 'chakra-ui-bottom-navigation';
const bottomNavigationOverries = {
// ... component's override
};
const MyBottomNavigation = withDefaultStyles(bottomNavigationOverries);
const theme = extendTheme({
components: {
BottomNavigation: MyBottomNavigation,
},
});
```
## Import
Chakra-UI Bottom Navigation exports 4 component:
- `BottomNavigation`: The wrapper that provides context for all children.
- `BottomNavigationItem`: A single Bottom Navigation element
- `BottomNavigationIcon`: An icon used to render the item
- `BottomNavigationLabel`: A label used to label an item
## Usage
```jsx
export const BasicExample = () => {
const [value, setValue] = useState(0);
return (
Home
Search
Favourites
);
};
```
### Bottom navigation as app navigation
```jsx
export const NavigationExample = () => {
const router = useRouter();
const handleChange = useCallback(
(path) => {
router.push(path);
},
[router.push]
);
return (
Home
Search
Favorites
);
};
```
## Props
### BottomNavigation props
BottomNavigation composes `Box` so you call pass all `Box` related props.
| Prop name | Description | Default value | Values |
| ------------- | --------------------------------------------- | ------------- | ------------------------------------------------------ |
| `colorScheme` | | `blue` | all default chakra-ui `colorSchemes` (can be extended) |
| `onChange` | function that is called when item is selected | | |
| `showLabel` | determines when label should be visible | `always` | `'never' \| 'if-active' \| 'always'` |
| `value` | active value of bottom navigation | | |
### BottomNavigationItem props
BottomNavigationItem composes `Button` so you call pass all `Button` related props.
| Prop name | Description | Default value | Values |
| --------- | ----------------------------------------------- | --------------------------------------------- | ------ |
| `value` | Value that will be passed to `onChange` handler | by default, value is set to index of the item | |
### BottomNavigationIcon props
BottomNavigationItem composes `Icon` so you call pass all `Icon` related props.
### BottomNavigationLabel props
BottomNavigationItem composes `Box` so you call pass all `Box` related props.
Every `BottomNavigationItem` should have `BottomNavigationLabel` so assistive technologies can label the element. If label is now show (inactive when `showLabel: 'if-active'` or when `showLabel: `'never'`), the label is only hidden from the screen but it is still rendered in the DOM.