Social Login Buttons (Web Component)
social-login-buttons is a light weight and simple Web Component to display Social Login Buttons in your Angular, React, VueJS or Vanilla JS project.
DEMO
Coming Soon
Why is social-login-button the best choice for your project?
There are plenty of other packages that display social login buttons but our packkage offers following features.
- One Component for all Platforms. social-login-component is a web component, it works on all platforms including Angular, React, Vue Js and Vanilla Javascript
- Lightweight and easy to implement.
- Fully customizable. Using props, You can set the button to use Material UI design, and remove animation with a minimum code changes.
Install
npm
npm install social-login-buttons
yarn
yarn add social-login-buttons
Usage
React Social Login
First of all, import the package into your class file
;
After imports, insert this code outside of your class declaration
;
Currently we are only providing 3 login buttons but dont worry more buttons are coming soon. (yay) To add the button to you page just add the following line where you want the button.
Google Login Button
<google-login> </google-login>
Facebook Login Button
<facebook-login> </facebook-login>
Github Login Button
<github-login> </github-login>
Customization
By default the buttons display their own text however you can change thme to say whatever you want.
<facebook-login text='Anything you write here will be the button text' ></facebook-login>
By default Login Buttons are animated on hover. You can remove the animation by setting animation
to false
. For example,
<facebook-login animation=false ></facebook-login>
By default the buttons use custom styling it can be changed to material ui design by setting variant
to material
<facebook-login variant=‘material’ ></facebook-login>
Angular Social Login
In your project directory navigate to app.module.ts
and do the following.
- Import'
CUSTOM_ELEMENTS_SCHEMA
from@angular/core
. Add this to the line where you are importing NGModule. - Edit you NGModule to set
CUSTOM_ELEMENTS_SCHEMA
in yourschemas
Previously your app.module.ts
file looked like this
;;;;;@ {}
Now your app.module.ts
file should look like this
;;;;;@ {}
Navigate to your component's typescript file and import the package.
;
After imports, insert this code outside of your class declaration
;
Now navigate to your component's HTML file and simply add the following line where you want to add the component.
Google Login Button
<google-login> </google-login>
Facebook Login Button
<facebook-login> </facebook-login>
Github Login Button
<github-login> </github-login>
Customization
By default the buttons display their own text however you can change thme to say whatever you want.
<facebook-login text='Anything you write here will be the button text' ></facebook-login>
By default Login Buttons are animated on hover. You can remove the animation by setting animation
to false
. For example,
<facebook-login animation=false ></facebook-login>
By default the buttons use custom styling it can be changed to material ui design by setting variant
to material
.
<facebook-login variant=‘material’ ></facebook-login>
Contribution
Issues and pull requests are welcome at https://github.com/hileets/social-login-buttons