open-index/open-npm huggingface dataset:
npm package: @jesperkov/create-dropdown
Description: Add dropdown functionality to your webpage
Author: Jesper
Latest version: 2.0.1

# create-dropdown

create-dropdown, brought to you by jesperkov.

This is a JS module that allows you to easily create styled dropdown menus.

## Demo

![Demo](./demo.gif)

## Prerequisites
- A module bundler (i.e. Webpack, Browserify, etc.)

## Installation
```
npm i @jesperkov/create-dropdown
```
# Usage
**To avoid unwanted errors, copy and paste the code below and modify it to fit your application.**
## HTML
Format your dropdown like so:
```
<div class = "dropdown-menu">
    <div class = "expand-button">
        <span> Expand Me <span>
    </div>
    <div class = "options">
        <div class = "option">
            <span>Option 1</span>
        </div>
        <div class = "option">
            <span>Option 2</span>
        </div>
        <div class = "option">
            <span>Option 3</span>
        </div>
    </div>
</div>
```
**WARNING: DO *NOT* FORGET TO INCLUDE THE SPANS**  

## Javascript

Your Javascript will simply need to look like this:
```
import createDropdown from "@jesperkov/create-dropdown";

const dropdownMenu = document.querySelector('.dropdown-menu');
const expandButton = document.querySelector('.expand-button');
const options = document.querySelector('.options');

createDropdown(dropdownMenu, expandButton, options);
```  
And thats it! No CSS is required, as the styling will be taken care of by the createDropdown function. However, if you want to modify the style or create your own, this is entirely possible by simply selected the elements from your own CSS stylesheet.

## Optional

We advise you to set the opacity of the *options* div to 0 on your own CSS stylesheet. Since the styling is done by Javascript, there is a possibility that you may get an unwanted flash of the *options* div before the script loads and hides it. By setting the opacity to 0 on your own stylesheet, you can avoid this potential problem entirely.
npm package: @jespers/eslint-plugin-css-modules
Description: ESLint plugin for CSS modules
Author: Jesper Johansson
Latest version: 0.2.0

<a href="https://www.npmjs.com/package/@jespers/eslint-plugin-css-modules">
  <img src="https://img.shields.io/npm/v/@jespers/eslint-plugin-css-modules">
</a>

Install:

```sh
yarn add --dev @jespers/eslint-plugin-css-modules
```

Configure:

```json
{
  "plugins": ["@jespers/css-modules"],
  "rules": {
    "@jespers/css-modules/no-unused-classes": "error"
  }
}
```
npm package: @jessaminnne/teenytiny
Description: Removes all spaces from a string
Latest version: 3.0.0

# @jessaminnne/teenytiny

[![npm (scoped)]
(https://img.shields.io/npm/v/@jessaminnne/teenytiny.svg)]
(https://github.com/jessaminebm/teenytiny)
[![npm bundle size (minified)]
(https://img.shields.io/bundlephobia/min/@jessaminnne/teenytiny.svg)]
(https://github.com/jessaminebm/teenytiny)

So smöll!