social-contact

1.0.9 • Public • Published

Social Contact Web Component

A web component that displays your contact information across the most popular social networks.

Social Network Social Contact attribute
Twitter twitter
LinkedIn linkedin
Facebook facebook
Instagram instagram
GitHub github

The component itself renders like below:
Social Contact Rendered Screenshot

Each one of the social profile links will open in a new tab when clicked.

Try it out yourself! (codepen)

Usage

Via script tag

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Social Contact - Web Component</title>
    <style>
        social-contact {
            display: block;
            width: 320px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <social-contact
        github="rcasto"
        linkedin="rcasto">
    </social-contact>

    <script async src="https://cdn.jsdelivr.net/npm/social-contact@1.0.5/dist/socialcontact.min.js"></script>
</body>
</html>

Via module bundler

  1. Install package via package manager of your choice.
npm install social-contact
  1. import 'social-contact' as part of your app module, it should then be included as part of your bundle.
import 'social-contact';

// Rest of your code...
  1. You can now use <social-contact></social-contact> in your app views!

If any of these properties is omitted, then that social contact method is simply not rendered.

For each of the social contact methods, all you need to provide to the web component property is the username associated with the social network profile.

References

Package Sidebar

Install

npm i social-contact

Weekly Downloads

1

Version

1.0.9

License

MIT

Unpacked Size

134 kB

Total Files

8

Last publish

Collaborators

  • rcasto