diff --git a/README.md b/README.md index 0383dfb..f491fa3 100644 --- a/README.md +++ b/README.md @@ -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 @@ -25,15 +39,12 @@ The `ssw.megamenu` NPM package provides you with the `` 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 ( -
Test MenuBar
-
Some content
+ /* {{ CONTENT_HERE }} */ ); } @@ -46,16 +57,12 @@ The `` 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 ( -
Test MenuBar
-
Some content
+ /* {{ CONTENT_HERE }} */ ); } @@ -77,10 +84,12 @@ In the project directory, you can run: ### `pnpm dev` -Runs the app in the development mode.
+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.
+The page will reload if you make edits. ### `pnpm build` @@ -88,8 +97,8 @@ Builds the lib for production to the `dist` folder.
### 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