A tiny JS library that renders @'s in the DOM's text to social media profile links
mentionify.js is a tiny JavaScript library that looks for all intances of @'s in the DOM's text nodes and injects an HTML a tag that links to that user's social media profile.
For example, if your document has something like:
<p id="twitter">
My Twitter handle is @jcvno!
<p>You can add mentionify.js and run it with some options:
<script src="mentionify.js"></script>
<script>
var mentionify = new Mentionify();
mentionify.run({
elementId: "twitter",
account: "twitter"
});
</script>Your document will then be rendered as:
<p id="twitter">
My Twitter handle is
<a href="//twitter.com/jcvno" class="mentionified">@jcvno</a>!
</p>Install mentionify.js using one of options below and include it as a <script> in your project.
Download the latest stable mentionify.js
npm install mentionify
You can use mentionify.js in the <body> of your HTML document:
<div id="container">
<p>
My Twitter handle is @jcvno!
<p>
</div>
<script src="mentionify.js"></script>
<script>
var mentionify = new Mentionify();
mentionify.run({
account: "twitter"
});
</script>The default account option is twitter which links to the user's Twitter profile, but can be overridden:
<div id="container">
<p>
My GitHub handle is @earthican!
<p>
</div>
<script src="mentionify.js"></script>
<script>
var mentionify = new Mentionify();
mentionify.run({
account: "github"
});
</script>The above HTML will be rendered as:
<div id="container">
<p>
My GitHub handle is
<a href="//github.com/earthican" class="mentionified">@earthican</a>!
</p>
</div>Runs mentionify.js using the specified options, which are described below.
The following options can be passed into Mentionify.run()
The id of the element to find and render "@user" text to a tags. Default: container
The social media account to link to. Default: twitter
Any social media account can be used to link to its web profile, provided that it has the following URL format: http://account.com/username
mentionify.js now also supports linkedin and reddit accounts:
<ul>
<li id="reddit">reddit: /u/canoj</li>
<li id="linkedin">LinkedIn: /in/justincano</li>
</ul>
<script src="mentionify.js"></script>
<script>
var mentionify = new Mentionify();
mentionify.run({
elementId: "reddit",
account: "reddit"
});
mentionify.run({
elementId: "linkedin",
account: "linkedin"
});
</script>Fork this repository and clone to your local machine. Make sure node and npm are installed, then cd into project dir and run:
$ npm installAny pull requests that relate to a new or existing feature, please write unit tests for your implementation. It's good practice!
Have a request? File an issue or, better yet, create a pull request ;)
ISC
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent