Socket
Socket
Sign inDemoInstall

react-profiles

Package Overview
Dependencies
112
Maintainers
1
Versions
8
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-profiles

A collection of Profile components with automatic data filling using public apis.


Version published
Maintainers
1
Weekly downloads
2
decreased by-66.67%

Weekly downloads

Readme

Source

react-profiles

A collection various Profile components with auto data retrieval using public APIs and auto cache management of profile data. You wanna showcase your profile ? Style it up with react-profiles :)

Features :

  • Profile components for lot of common sites.
  • Compressed SVG icons for scalability.
  • Uses public APIs to fetch data based on given username
  • Manages caching of API data automatically with appropriate refresh frequency.
  • Material ui components for visual treat.
  • Tooltip customization.

Usage :

npm install react-profiles
import { GitHub, HackerRank, Facebook, StackOverflow, LinkedIn, Instagram, GooglePlus, Youtube, Yahoo, Twitch, Twitter, Skype } from 'react-profiles';

NOTE : DONT FORGET to include fontawesome css in your index.html
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet"  type='text/css'>

Profile Bars :

GitHub (auto fetch data) :

<GitHub username="nateshmbhat" />
StackOverflow (auto fetch data) :

Imgur

<StackOverflow userid="6665568" tooltip="custom tooltip" />
LinkedIn (no auto fetch):

<LinkedIn username="nateshmbhat" organization="Google" role="Developer" />
HackerRank (no auto fetch):

<HackerRank username="nateshmbhat1" rank={4900} category="Algorithm Practice"
    competitions="13"
    contestRating="1500"
    gold="1"
    silver="2"
    bronze="3"
/>

Profile Chips :

<Instagram link="https://www.instagram.com/nateshmbhat/" />
<Facebook link="" newPage{false}/>
<GooglePlus link="" newPage={false} />
<Youtube link="" />
<Twitch link="" />
<Twitter link="" />
<Skype link="" />
<Yahoo link="" tooltip="My tooltip"  />

Props :

  • newPage = open new page on clicking link (default = true)
  • link = profile link
  • tooltip = tooltip to be shown on mouse hover

Keywords

FAQs

Last updated on 15 Aug 2020

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc