Skip to content

A set of Profile UI components like Github , Stackoverflow , hackerrank with automatic api calls to get the profile data of a user.

License

Notifications You must be signed in to change notification settings

nateshmbhat/react-profiles

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

30 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Links :