SIDEMENU

Sidemenu component which optionaly works with icons

Production

Icon support

In order to use icons, you need to install fortawesome dependencies:

npm install --save @fortawesome/fontawesome-svg-core @fortawesome/free-brands-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-solid-svg-icons

Next, in your project you need to generate a lib with the icons that you want to use. In this example we want to use rocket and coffee icon. Let's add this code in your app entry point:

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab } from '@fortawesome/free-brands-svg-icons'
import { faRocket, faCoffee } from '@fortawesome/free-solid-svg-icons' 

library.add(fab, faRocket, faCoffee)

Using this, now you can use react-fontawesome anywhere in your app. Our sidemenu component is ready to use it. More info: React FontAwesome

How to use

PropTypes

Sidemenu.propTypes = {
  items: PropTypes.arrayOf(
    PropTypes.shape({
      icon: PropTypes.shape({
        name: PropTypes.string,
        size: PropTypes.string,
      }),
      text: PropTypes.string,
      link: PropTypes.string,
      active: PropTypes.boolean,
    })
  ),
  config: PropTypes.shape({
    logo: PropTypes.shape({
      src: PropTypes.string,
      alt: PropTypes.string,
      width: PropTypes.string,
      height: PropTypes.string,
    }),
    menu: PropTypes.shape({
      width: PropTypes.string,
    }),
  }),
  onItemClick: PropTypes.func,
}

config

The menu config is an object with configuration for the menu, like logo and size. Properties are:

• menu [object]:
  • width [string]: width of the menu
• logo [object]:
  • alt [string]: description of the image logo
  • src [string]: source of the logo
  • width [string]: width of the logo
  • height [string]: height of the logo

items

The menu items are an array of object, where each object is a menu item. Propierties are:

• text [string]: the text to diplay
• link [string]: link of the button
• active [boolean]: if that item is active or not
• icon [object]:
  • name [string]: name of the icon in font awesome
  • color [string]: color of the icon

const items = [
  { text: 'Item1', link: 'http://item.com', active: true },
  { text: 'Item1', link: 'http://item2.eu' },
  {
    text: 'Rocket',
    link: 'http://rocket.com',
    icon: { name: 'rocket', size: 'lg' },
  },
  {
    text: 'Coffee shop',
    link: 'http://coffee-shop.com',
    icon: { name: 'coffee', size: '2x' },
  },
]

onItemClick

Function fired each time that a menu item is pressed. Receives itemId and link

  <Sidemenu
    items={items}
    config={config}
    onItemClick={(id, link) => console.log(`${id} seleccionado ${link}`)}
  />

To use this component:

import { Sidemenu } from 'bst-sidemenu'


<Sidemenu items={items} />

Development

Folder structure

- build
- config
- node_modules
- src
.babelrc
.eslintignore
.eslintrc
.gitignore
.npmignore
package.json
README.md

Folders

• build: is the transpiled code in ES5.
• config: is where the webpack configuration is defined.
• src: is where our component / modules are developed.

Files

• .babelrc: here is defined the babel configuration about how transpile our code
• .eslintrc / .eslintignore: here are defined the eslint configuration and ignored files
• .npmignore / .gitignore: here are defined the files and foldes that we want to ignore for and npm

How to use

You must create your component or module inside src/ folder. To test your component you must have another project to load it, but before you need to link it locally with npm.

1. Link your component from your component project:

npm link

2. Run webpack to compile your component and keep it in watch mode:

npm start

3. In the second project, where you want to load your component, create a reference to it:

npm link component-name

4. Import it and use into your project.

This simulates locally the node_modules and npm behavior.

Publish your component

Remeber to add to peerDependencies in package.json the dependencies that will used by it's parent from our component in production.

You need to login using your npm account, and then run:

npm publish

Using the prepublishOnly script, each time that you want to publish your component, webpack generates a new fresh build.

Remember to unlink your component after publish:

In your component folder:

npm unlink

In your local project to test:

npm unlink component-name

Webpack configuration

const path = require('path')
module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, '../build'),
    filename: 'index.js',
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|build)/,
        use: {
          loader: 'babel-loader',
        },
      },
      {
        test: /\.css$/,
        exclude: /(node_modules|build)/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  externals: {
    react: {
      commonjs: 'react',
      commonjs2: 'react',
      amd: 'React',
      root: 'React',
    },
    'prop-types': {
       commonjs: 'prop-types',
       commonjs2: 'prop-types',
       amd: 'PropTypes',
       root: 'PropTypes',
    },
  },
  resolve: {
    extensions: ['.js', '.jsx', '.css'],
    alias: {
      react: path.resolve(__dirname, './node_modules/react'),
      'prop-types': path.resolve(
        __dirname, 
        './node_modules/prop-types'
      ),
      'styled-components': path.resolve(
        __dirname,
        './node_modules/styled-components'
      ),
    },
  },
}

EsLint configuration

{
  "parser": "babel-eslint",
  "extends": ["eslint:recommended", "airbnb"],
  "plugins": ["import", "react"],
  "env": {
    "es6": true,
    "jest": true
  },
  "rules": {
    "semi": ["error", "never"],
    "comma-dangle": ["error", "always-multiline"],
    "import/newline-after-import": [
      "error",
      {
        "count": 2
      }
    ],
    "max-len": "off",
    "import/no-absolute-path": 0,
    "import/extensions": 0,
    "no-mixed-operators": 0,
    "import/no-unresolved": "off",
    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "no-restricted-properties": [
      "error",
      {
        "property": "lenght"
      }
    ],
    "import/no-extraneous-dependencies": [
      "error",
      {
        "packageDir": "./"
      }
    ]
  }
}

Changelog

Information about latest changes Changelog