Skip to content

Commit b729aa1

Browse files
macroingmacroing
committed
Update README.md.
1 parent d8ae856 commit b729aa1

File tree

6 files changed

+217
-210
lines changed

6 files changed

+217
-210
lines changed

‎README.md‎

Lines changed: 10 additions & 210 deletions
Original file line numberDiff line numberDiff line change
@@ -4,227 +4,27 @@
44

55
## Getting Started
66

7-
To clone this repository, you can type the following in Git Bash.
8-
9-
```bash
10-
git clone https://github.com/macroing/simple-react-components.git
11-
```
12-
137
To add this library to your project, you can type the following in Git Bash.
148

159
```bash
1610
npm install @macroing/simple-react-components
1711
```
1812

19-
## Components
20-
21-
In this section the components in `@macroing/simple-react-components` will be described.
22-
23-
### MenuBar
24-
25-
The `MenuBar` component represents a menu bar. It uses either the `DesktopMenuBar` or the `MobileMenuBar` components when rendering. This depends on the window resolution.
26-
27-
The `MenuBar` component uses the following properties:
28-
29-
| Name | Description | Optional |
30-
| --------------------- | -------------------------------------------------------------------------------------- | -------- |
31-
| `columns` | The `columns` property describes how many columns the menus should have. | Yes |
32-
| `items` | The `items` property contains the items of the menu bar. | No |
33-
| `linkFactory` | The `linkFactory` property is a function that returns a link. | Yes |
34-
| `logo` | The `logo` property contains the logo of the menu bar. | Yes |
35-
| `styleDesktopMenuBar` | The `styleDesktopMenuBar` property is used for styling the `DesktopMenuBar` component. | Yes |
36-
| `styleMobileMenuBar` | The `styleMobileMenuBar` property is used for styling the `MobileMenuBar` component. | Yes |
37-
38-
#### The `items` property
39-
40-
The `items` property consists of an array with objects. Each object contains the following properties:
41-
42-
| Name | Description | Optional |
43-
| ----------- | ---------------------------------------------------------------------------------------------------------- | -------- |
44-
| `badge` | The `badge` property contains the badge to render for the current menu. | Yes |
45-
| `columns` | The `columns` property describes how many columns the current menu should have. | Yes |
46-
| `component` | The `component` property contains a component to render in the current menu. | Yes |
47-
| `href` | The `href` property contains the URL for the current menu. | Yes |
48-
| `icon` | The `icon` property contains the icon to be rendered for the current menu. For example Font Awesome icons. | Yes |
49-
| `id` | The `id` property contains the unique ID for the current menu. | No |
50-
| `items` | The `items` property contains the items of the current menu. | Yes |
51-
| `text` | The `text` property contains the text to be rendered for the current menu. | No |
52-
53-
#### The `items` property
54-
55-
The `items` property described in the table above consists of an array with objects. Each object contains the following properties:
56-
57-
| Name | Description | Optional |
58-
| ------- | ---------------------------------------------------------------- | -------- |
59-
| `items` | The `items` property contains the items of the current sub-menu. | No |
60-
61-
#### The `items` property
62-
63-
The `items` property described in the table above consists of an array with objects. Each object contains the following properties:
64-
65-
| Name | Description | Optional |
66-
| --------- | -------------------------------------------------------------------------------------------------------------------- | -------- |
67-
| `badge` | The `badge` property contains the badge to render for the current menu item. | Yes |
68-
| `href` | The `href` property contains the URL for the current menu item link. Use this instead of `onClick` to render a link. | Yes |
69-
| `icon` | The `icon` property contains the icon to be rendered for the current menu item. For example Font Awesome icons. | Yes |
70-
| `onClick` | The `onClick` property contains an on-click function. Use this instead of `href` to render a button. | Yes |
71-
| `text` | The `text` property contains the text to be rendered for the current menu item. | No |
72-
73-
#### The `linkFactory` property
74-
75-
The `linkFactory` property is a function that looks like the following by default:
76-
77-
```jsx
78-
function linkFactory(className, href, onClick, children) {
79-
return (
80-
<a className={className} href={href} onClick={onClick}>
81-
{children}
82-
</a>
83-
);
84-
}
85-
```
86-
87-
#### The `logo` property
88-
89-
The `logo` property consists of an object. It has the following properties:
90-
91-
| Name | Description | Optional |
92-
| ------ | -------------------------------------------------------------------------------------------------- | -------- |
93-
| `alt` | The `alt` property contains the alternative text to be rendered if the image cannot be downloaded. | No |
94-
| `href` | The `href` property contains the URL of the logo. | No |
95-
| `src` | The `src` property contains the source of the image. | No |
96-
97-
#### Styling
98-
99-
The `DesktopMenuBar` component uses the following CSS variables:
100-
101-
- `--src-desktop-menu-bar-badge-color`
102-
- `--src-desktop-menu-bar-columns`
103-
- `--src-desktop-menu-bar-primary-color-0`
104-
- `--src-desktop-menu-bar-primary-color-1`
105-
- `--src-desktop-menu-bar-primary-color-2`
106-
- `--src-desktop-menu-bar-primary-color-3`
107-
- `--src-desktop-menu-bar-secondary-color`
108-
109-
The `MobileMenuBar` component uses the following CSS variables:
110-
111-
- `--src-mobile-menu-bar-badge-color`
112-
- `--src-mobile-menu-bar-primary-color-0`
113-
- `--src-mobile-menu-bar-primary-color-1`
114-
- `--src-mobile-menu-bar-primary-color-2`
115-
- `--src-mobile-menu-bar-primary-color-3`
116-
- `--src-mobile-menu-bar-secondary-color`
117-
118-
#### Example
119-
120-
The following example demonstrates how you can create your own implementation of the `MenuBar` component.
121-
122-
```jsx
123-
import Link from "next/link";
124-
import { useEffect, useState } from "react";
125-
126-
import { MenuBar } from "@macroing/simple-react-components";
127-
128-
export default function CustomMenuBar(props) {
129-
const [items, setItems] = useState([]);
130-
const [logo, setLogo] = useState({ alt: "Logo", href: "/", src: "/logo.png" });
131-
132-
function linkFactory(className, href, onClick, children) {
133-
return (
134-
<Link className={className} href={href} onClick={onClick}>
135-
{children}
136-
</Link>
137-
);
138-
}
139-
140-
useEffect(() => {
141-
setItems([
142-
{
143-
href: "/",
144-
icon: "fa fa-home",
145-
id: 0,
146-
text: "Home",
147-
},
148-
{
149-
badge: "2",
150-
icon: "fa fa-user",
151-
id: 1,
152-
items: [
153-
{
154-
items: [
155-
{
156-
href: "/profile",
157-
icon: "fa fa-user",
158-
text: "Profile",
159-
},
160-
{
161-
badge: "1",
162-
href: "/messages",
163-
icon: "fa fa-comment",
164-
text: "Messages",
165-
},
166-
{
167-
badge: "1",
168-
href: "/notifications",
169-
icon: "fa fa-bell",
170-
text: "Notifications",
171-
},
172-
{
173-
href: "/settings",
174-
icon: "fa fa-cog",
175-
text: "Settings",
176-
},
177-
{
178-
icon: "fa fa-sign-out",
179-
onClick: (e) => {},
180-
text: "Log out",
181-
},
182-
],
183-
},
184-
],
185-
text: "Account",
186-
},
187-
{
188-
component: <div style={{ whiteSpace: "nowrap" }}>Your shopping cart is empty.</div>,
189-
icon: "fa fa-shopping-cart",
190-
id: 2,
191-
text: "Shopping Cart",
192-
},
193-
{
194-
href: "/admin",
195-
icon: "fa fa-dashboard",
196-
id: 3,
197-
text: "Admin",
198-
},
199-
]);
200-
}, []);
13+
To clone this repository, you can type the following in Git Bash.
20114

202-
return <MenuBar columns={1} items={items} linkFactory={linkFactory} logo={logo} />;
203-
}
15+
```bash
16+
git clone https://github.com/macroing/simple-react-components.git
20417
```
20518

206-
### TabPane
207-
208-
The `TabPane` component represents a tab pane.
209-
210-
The `TabPane` component uses the following properties:
211-
212-
| Name | Description | Optional |
213-
| ---------- | ----------------------------------------------------------------------------------------------------------- | -------- |
214-
| `children` | The `children` property consists of a function that renders the content of the current tab. | No |
215-
| `styles` | The `styles` property contains the class names for all elements. | Yes |
216-
| `tabIndex` | The `tabIndex` property contains the index of the tab to start at. | Yes |
217-
| `tabs` | The `tabs` property contains an array of tabs. The content of the array is the text to render for each tab. | No |
218-
219-
#### Example
19+
## Components
22020

221-
The following example demonstrates how you can use the `TabPane` component.
21+
The components in `@macroing/simple-react-components` will be described below.
22222

223-
```jsx
224-
<TabPane tabIndex={0} tabs={["Tab 1", "Tab 2", "Tab 3"]}>
225-
{(currentTabIndex, currentTab) => <div>{currentTab}</div>}
226-
</TabPane>
227-
```
23+
- [Button](https://github.com/macroing/simple-react-components/tree/master/documentation/button) provides a component that defines a button.
24+
- [Dialog](https://github.com/macroing/simple-react-components/tree/master/documentation/dialog) provides a component that defines a dialog.
25+
- [Input](https://github.com/macroing/simple-react-components/tree/master/documentation/input) provides a component that defines an input.
26+
- [MenuBar](https://github.com/macroing/simple-react-components/tree/master/documentation/menu-bar) provides a component that defines a menu bar.
27+
- [TabPane](https://github.com/macroing/simple-react-components/tree/master/documentation/tab-pane) provides a component that defines a tab pane.
22828

22929
## Note
23030

‎documentation/button/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# `Button`

‎documentation/dialog/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# `Dialog`

‎documentation/input/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# `Input`

0 commit comments

Comments
 (0)