Skip to content

Commit

Permalink
Made readme additions
Browse files Browse the repository at this point in the history
  • Loading branch information
Harry-Ross committed Dec 29, 2023
1 parent 5850dfc commit c90027a
Showing 1 changed file with 33 additions and 24 deletions.
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

0 comments on commit c90027a

Please sign in to comment.