https://github.com/guillaumebriday/custom-element-password-toggle

🔒 This component is a Custom Element written in pure vanilla JavaScript. It's designed to toggle the password visibility in an easy way.
https://github.com/guillaumebriday/custom-element-password-toggle

custom-elements javascript jest password-toggle password-visibility puppeteer vanilla-javascript

Last synced: 5 months ago
JSON representation

🔒 This component is a Custom Element written in pure vanilla JavaScript. It's designed to toggle the password visibility in an easy way.

• Host: GitHub
• URL: https://github.com/guillaumebriday/custom-element-password-toggle
• Owner: guillaumebriday
• License: mit
• Created: 2020-04-10T10:36:41.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2021-01-24T22:27:07.000Z (over 4 years ago)
• Last Synced: 2024-04-26T00:24:37.990Z (about 1 year ago)
• Topics: custom-elements, javascript, jest, password-toggle, password-visibility, puppeteer, vanilla-javascript
• Language: HTML
• Homepage: https://custom-element-password-toggle.netlify.com/
• Size: 371 KB
• Stars: 4
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# Password Toggle Custom Element

[![Donate](https://img.shields.io/badge/Donate-PayPal-green.svg)](https://www.paypal.me/guillaumebriday)

[![](https://img.shields.io/npm/dt/custom-element-password-toggle.svg)](https://www.npmjs.com/package/custom-element-password-toggle)

[![](https://img.shields.io/npm/v/custom-element-password-toggle.svg)](https://www.npmjs.com/package/custom-element-password-toggle)

[![](https://github.com/guillaumebriday/custom-element-password-toggle/workflows/Lint/badge.svg)](https://github.com/guillaumebriday/custom-element-password-toggle)

[![](https://github.com/guillaumebriday/custom-element-password-toggle/workflows/Test/badge.svg)](https://github.com/guillaumebriday/custom-element-password-toggle)

[![](https://img.shields.io/github/license/guillaumebriday/custom-element-password-toggle.svg)](https://github.com/guillaumebriday/custom-element-password-toggle)

[![Netlify Status](https://api.netlify.com/api/v1/badges/f48191db-a459-4ab4-849f-10ea970915af/deploy-status)](https://custom-element-password-toggle.netlify.com)

## Getting started

This component is a [Custom Element](https://developer.mozilla.org/en-US/docs/Web/Web_Components) written in pure vanilla JavaScript. It's designed to toggle the password visibility in an easy way.

## Installation

This package is written with the new ES6 syntax. You can import it directly in your browser with [UNPKG](https://unpkg.com/).

```html

```

You can also install it with npm or yarn:

```bash

$ yarn add custom-element-password-toggle

```

```html

  import 'custom-element-password-toggle'

```

## Basic Usage

Just add `is="password-toggle"` on your input fields:

```html

```

## Development

### Project setup

```bash

$ yarn install

$ yarn serve

```

### Tests

[Jest](https://jestjs.io/) and [Puppeteer](https://github.com/puppeteer/puppeteer) are responsible to test this component:

```bash

$ yarn test

```

### Linter

[Prettier](https://prettier.io/) and [ESLint](https://eslint.org/) are responsible to lint and format this component:

```bash

$ yarn lint

$ yarn format

```

## Contributing

Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.

## License

This project is released under the [MIT](http://opensource.org/licenses/MIT) license.