Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

README Additions #51

Closed
wants to merge 1 commit into from
Closed
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
57 changes: 33 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,34 @@

### Installation

1. install package
1. Install package
```bash
npm install ssw.megamenu
```
2. import global styles

```bash
yarn add ssw.megamenu
```

```bash
pnpm add ssw.megamenu
```

2. Import the generated styles

**NOTE: If you have TailwindCSS installed in your project, you can skip this step**

```javascript
import "ssw.megamenu/dist/style.css";
import "ssw.megamenu/style.css";
```
3. use components in your project

3. You can then use the components in your React app like so:
```javascript
// commonjs
// CommonJS
const { Menu, MobileMenu, MenuBar } = require('ssw.megamenu');
// es module
import { Menu, MobileMenu, MenuBar } from 'ssw.megamenu';

// ESM
import { MegaMenuLayout } from 'ssw.megamenu';
```

### Basic Usage
Expand All @@ -25,15 +39,12 @@ The `ssw.megamenu` NPM package provides you with the `<MegaMenuLayout />` compon
#### Example:

```tsx
import React, { useState, useRef } from 'react';
import { Menu, MobileMenu } from 'ssw.megamenu';
import './App.css';
import { MegaMenuLayout } from 'ssw.megamenu';

function App() {
return (
<header className="App-header">Test MenuBar</header>
<MegaMenuLayout />
<div>Some content</div>
/* {{ CONTENT_HERE }} */
);
}

Expand All @@ -46,16 +57,12 @@ The `<MegaMenuLayout />` component can be used with SSG (Static Site Generation)
#### Example usage with SSR (Next.js):

```tsx

import React, { useState, useRef } from 'react';
import { Menu, MobileMenu } from 'ssw.megamenu';
import './App.css';
import { MegaMenuLayout } from 'ssw.megamenu';

function App(props) {
return (
<header className="App-header">Test MenuBar</header>
<MegaMenuLayout menuBarItems={props.menuBarItems} />
<div>Some content</div>
/* {{ CONTENT_HERE }} */
);
}

Expand All @@ -77,19 +84,21 @@ In the project directory, you can run:

### `pnpm dev`

Runs the app in the development mode.<br />
Runs the app in the development mode.


Open [http://localhost:5173](http://localhost:5173) to view it in the browser.

The page will reload if you make edits.<br />
The page will reload if you make edits.

### `pnpm build`

Builds the lib for production to the `dist` folder.<br />

### How to publish?

1. **Important: Before to push your changes, you need to increment the version number in the file package.json**
2. Make a pull request to integrate your code into the main branch.
1. **Important: Before to push your changes, you need to increment the version number in the file package.json using [semver](https://semver.org/)**
2. Make a pull request to add your code into the `main` branch.
3. Get the pull request approved
4. Merged your code into main branch
5. Package published by github actions
4. Merge your code into the `main` branch
5. Publish a GitHub release with the same version number as the one you incremented in the file package.json at https://github.com/SSWConsulting/SSW.MegaMenu/releases