Creating a viral internet sensation with React
Want your React application to become the next viral sensation of the internet? Make sure you include those share Facebook/Twitter/Pinterest share buttons!
This week we've compiled a list of social media components to leverage your app's K-factor. We'll take a look at YouTube video player, a couple of options for Twitter/Pinterest/Facebook share buttons and a tutorial on creating a Buffer-like image creation tool.
Cheers!
-Sophia Shoemaker
Tutorials
A clone of Buffer's Pablo -- an image creator for social media
This tutorial explores how to incorporate the canvas element into a React component. Check out the code on github.
goshakkk.name
Code
Video Player for SoundCloud, Vimeo, YouTube and more
A component for playing videos from a variety of different sources including file paths, YouTube, SoundCloud and Vimeo. The component parses a URL and loads in the appropriate markup and external SDKs to play media from various sources.
github.com
A YouTube video player
This component is similar to the previous video player above, but this video player is specific to YouTube videos only. It has options to include event handlers for the variety of YouTube's events (onReady, onPlaybackQualityChange, onPlay, etc) and the ability to change the size of the video player.
github.com
Facebook Login Component
Adding a Facebook login element is now as simple as dropping this component into your React application. In case you don't want to use the default styles the component gives you, it includes the option to customize it using CSS classes.
github.com
A collection of React components for Pinterest widgets
Available widgets include:
- Pin It Button
- Pinterest Follow Button
- Pinterest Pin Widget
- Pinterest Profile Widget
- Pinterest Board Widget
- Pinterest Grid
A couple of options for social media buttons for Twitter, Facebook, Pinterest, etc
https://github.com/nygardk/react-share
Features include:
- Share buttons with generated icons or custom icons of your choice
- Opens a popup share-window
- No external script loading, i.e. no dependencies on SDKs
https://github.com/olahol/react-social
Features include:
- Adding a custom message that's prepended before the link that's being shared
- Callback for when the count is updated
About
Fullstack React: The Book
Learn React the right way with Fullstack React: The Complete Guide to ReactJS and Friends. If you've already purchased a copy, you automatically get access to the latest changes. If you haven't purchased a copy yet, don't delay and get the most up to date and comprehensive information and tutorials.
fullstackreact.com
Like what you've been reading from Fullstack React? You can help us spread the word. Please forward this email to you friends (and let them know they can subscribe here).
Follow us on Twitter
Curated with love by Sophia Shoemaker, Nate Murray and the Fullstack.io team.
Suggestions are welcome, just reply to this email - we'd love to hear from you.