https://github.com/henrylin03/language-picker
Language picker UI component written in vanilla JS
https://github.com/henrylin03/language-picker
dropdown-menu language-picker odin-project ui ui-components
Last synced: 2 months ago
JSON representation
Language picker UI component written in vanilla JS
- Host: GitHub
- URL: https://github.com/henrylin03/language-picker
- Owner: henrylin03
- License: mit
- Created: 2024-05-27T00:58:34.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-03T01:42:24.000Z (about 2 years ago)
- Last Synced: 2025-02-08T04:34:45.074Z (over 1 year ago)
- Topics: dropdown-menu, language-picker, odin-project, ui, ui-components
- Language: JavaScript
- Homepage:
- Size: 107 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @henrylin03/language-picker
Lightweight language picker UI component, written in vanilla JavaScript (JS).
This package was developed and published as an exercise for [The Odin Project](https://www.theodinproject.com/lessons/node-path-javascript-dynamic-user-interface-interactions).
## Installation
Install the package using npm:
```bash
npm install @henrylin03/language-picker
```
## Usage
In your JS file, import the `createLanguagePicker` function to create a dropdown of languages
```js
import createLanguagePicker from "@henrylin03/language-picker";
```
### Syntax
```js
createLanguagePicker( obj )
```
#### Parameters
`obj` is a JS object that contains several parameters required to generate your language picker. The following are its keys:
* **`containerElementCSSSelector`** (string): CSS selector of the container (parent) element where the language picker will be appended as a child.
* If not provided, the language picker will be appended to the `` of the document
* **`languages`** (array): array of language strings to display in the dropdown. The first language in the array will be the initial selected language, and displayed on the button that triggers the dropdown.
* If not provided, the only language will be "English"
* **`expandEvent`** (string): specifies the type of user interaction that will expand the language picker.
* **Valid values**: `"hover"`, `"click"`
* If not provided, the dropdown will be expanded on a click event
### Example
#### HTML
```html
DEMO
Hover dropdown
Click dropdown
import createDropdown from '@henrylin03/ui-dropdown';
const LANGUAGES = ["English", "简体中文", "繁體中文"];
const clickDropdownOptions = {
containerElementCSSSelector: "#click-dropdown",
expandEvent: "click",
languages: LANGUAGES,
};
const hoverDropdownOptions = {
containerElementCSSSelector: "#hover-dropdown",
expandEvent: "hover",
languages: LANGUAGES,
};
createDropdown(clickDropdownOptions);
createDropdown(hoverDropdownOptions);
```
#### Initial state
#### Expanded
## Contributing
Contributions are welcome! Please feel free to open an issue and/or submit a pull request on [GitHub](https://github.com/henrylin03/language-picker).
## License
This project is licensed under the MIT License.
## Author
Henry Lin:
## Links
* [GitHub repository](https://github.com/henrylin03/language-picker)
* [Issues](https://github.com/henrylin03/language-picker/issues)