├── .babelrc ├── .gitignore ├── www ├── .gitignore ├── pages │ ├── 404.md │ ├── _template.jsx │ └── index.md ├── css │ ├── main.css │ └── github.css ├── README.md ├── gatsby-node.js ├── utils │ ├── colors.js │ └── typography.js ├── components │ ├── breakpoints.css │ ├── Footer.jsx │ ├── Breakpoint.js │ └── SharingButtons.jsx ├── config.toml ├── wrappers │ └── md.jsx ├── package.json ├── .travis.yml └── html.js ├── src ├── utils │ └── encodeURI.js ├── icons │ ├── LinkedIn.jsx │ ├── Telegram.jsx │ ├── Facebook.jsx │ ├── Tumblr.jsx │ ├── Twitter.jsx │ ├── WhatsApp.jsx │ ├── Pinterest.jsx │ ├── Email.jsx │ ├── Google.jsx │ └── Reddit.jsx ├── index.js ├── buttons │ ├── Google.jsx │ ├── Reddit.jsx │ ├── Facebook.jsx │ ├── Email.jsx │ ├── WhatsApp.jsx │ ├── Twitter.jsx │ ├── Telegram.jsx │ ├── LinkedIn.jsx │ ├── Pinterest.jsx │ └── Tumblr.jsx ├── components │ └── SharingButton.jsx └── main.css ├── test ├── .eslintrc └── components │ └── SharingButton.test.jsx ├── .eslintrc ├── dev ├── index.html └── index.jsx ├── .gatsby-context.js ├── webpack.config.js ├── LICENSE ├── package.json └── README.md /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "react"] 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | dev/bundle.js 3 | dist 4 | npm-debug.log 5 | -------------------------------------------------------------------------------- /www/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | public/ 3 | .gatsby-context.js 4 | .DS_Store 5 | -------------------------------------------------------------------------------- /www/pages/404.md: -------------------------------------------------------------------------------- 1 | --- 2 | path: /404.html 3 | --- 4 | 5 | # NOT FOUND 6 | 7 | You just hit a route that doesn't exist... the sadness. 8 | -------------------------------------------------------------------------------- /src/utils/encodeURI.js: -------------------------------------------------------------------------------- 1 | export default (string) => { 2 | if (typeof string === 'undefined') { 3 | return '' 4 | } 5 | 6 | return encodeURIComponent(string) 7 | } 8 | -------------------------------------------------------------------------------- /test/.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.eslintrc", 3 | "env": { 4 | "mocha": true 5 | }, 6 | "rules": { 7 | "react/jsx-filename-extension": 0 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /www/css/main.css: -------------------------------------------------------------------------------- 1 | .demo1-ball { 2 | border-radius: 99px; 3 | background-color: white; 4 | width: 50px; 5 | height: 50px; 6 | border: 3px solid white; 7 | position: absolute; 8 | background-size: 50px; 9 | } 10 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "root": true, 3 | "extends": "airbnb", 4 | "env": { 5 | "browser": true 6 | }, 7 | "rules": { 8 | "semi": 0, 9 | "import/no-extraneous-dependencies": ["error", {"devDependencies": true}] 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /www/README.md: -------------------------------------------------------------------------------- 1 | # gatsby-starter-documentation 2 | Starter for building documentation site with GatsbyJS 3 | 4 | Install this starter (assuming Gatsby is installed) by running from your CLI: 5 | `gatsby new gatsby-documentation-site https://github.com/gatsbyjs/gatsby-starter-documentation` 6 | -------------------------------------------------------------------------------- /www/gatsby-node.js: -------------------------------------------------------------------------------- 1 | const Webpack = require('webpack') 2 | 3 | exports.modifyWebpackConfig = function(config) { 4 | config.plugin( 5 | 'defineplugin', 6 | Webpack.DefinePlugin, 7 | [{ 8 | 'process.env.BORING_SHARE_BUTTONS': JSON.stringify('false'), 9 | }] 10 | ) 11 | 12 | return config 13 | } 14 | -------------------------------------------------------------------------------- /www/utils/colors.js: -------------------------------------------------------------------------------- 1 | import colorPairsPicker from 'color-pairs-picker' 2 | import chroma from 'chroma-js' 3 | 4 | import { config } from 'config' 5 | 6 | export const colors = colorPairsPicker(config.baseColor, { 7 | contrast: 5.5, 8 | }) 9 | 10 | const darker = chroma(config.baseColor).darken(10).hex() 11 | export const activeColors = colorPairsPicker(darker, { 12 | contrast: 7, 13 | }) 14 | -------------------------------------------------------------------------------- /www/components/breakpoints.css: -------------------------------------------------------------------------------- 1 | @media only screen and (min-width: 700px) { 2 | .breakpoint-min-width-700 { 3 | display: block; 4 | } 5 | .breakpoint-max-width-700 { 6 | display: none; 7 | } 8 | } 9 | @media only screen and (max-width: 700px) { 10 | .breakpoint-min-width-700 { 11 | display: none; 12 | } 13 | .breakpoint-max-width-700 { 14 | display: block; 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /www/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export default () => ( 4 | 16 | ) 17 | -------------------------------------------------------------------------------- /www/config.toml: -------------------------------------------------------------------------------- 1 | siteTitle="React Sharingbuttons" 2 | baseColor = "#1B5E20" 3 | linkPrefix = "/react-sharingbuttons" 4 | docPages = [ 5 | "/docs/", 6 | "/docs/getting-started/", 7 | "/docs/how-to-run/", 8 | "/docs/some-react-code/", 9 | "/docs/the-next-step/", 10 | "/docs/conclusion/", 11 | ] 12 | repoUrl = "https://github.com/caspg/react-sharingbuttons" 13 | siteUrl = "https://caspg.github.io/react-sharingbuttons" 14 | -------------------------------------------------------------------------------- /dev/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Development - react-sharingbuttons 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/icons/LinkedIn.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/icons/Telegram.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/icons/Facebook.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/icons/Tumblr.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as Email } from './buttons/Email' 2 | export { default as Facebook } from './buttons/Facebook' 3 | export { default as Google } from './buttons/Google' 4 | export { default as Pinterest } from './buttons/Pinterest' 5 | export { default as Reddit } from './buttons/Reddit' 6 | export { default as Tumblr } from './buttons/Tumblr' 7 | export { default as Twitter } from './buttons/Twitter' 8 | export { default as WhatsApp } from './buttons/WhatsApp' 9 | export { default as Telegram } from './buttons/Telegram' 10 | export { default as LinkedIn } from './buttons/LinkedIn' 11 | -------------------------------------------------------------------------------- /www/wrappers/md.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DocumentTitle from 'react-document-title' 3 | import { config } from 'config' 4 | 5 | module.exports = React.createClass({ 6 | propTypes() { 7 | return { 8 | route: React.PropTypes.object, 9 | } 10 | }, 11 | render() { 12 | const post = this.props.route.page.data 13 | 14 | return ( 15 | 16 |
17 |
18 |
19 | 20 | ) 21 | }, 22 | }) 23 | -------------------------------------------------------------------------------- /.gatsby-context.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /* weak */ 4 | // This file is auto-written and used by Gatsby to require 5 | // files from your pages directory. 6 | module.exports = function (callback) { 7 | var context = require.context('./pages', true, /(coffee|cjsx|jsx|js|markdown|md|ipynb|html|json|yaml|toml)$/); // eslint-disable-line 8 | if (module.hot) { 9 | module.hot.accept(context.id, function () { 10 | context = require.context('./pages', true, /(coffee|cjsx|jsx|js|markdown|md|ipynb|html|json|yaml|toml)$/); // eslint-disable-line 11 | return callback(context); 12 | }); 13 | } 14 | return callback(context); 15 | }; -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | 3 | const devPath = path.join(__dirname, 'dev') 4 | 5 | module.exports = { 6 | entry: path.join(devPath, 'index.jsx'), 7 | output: { 8 | path: devPath, 9 | filename: 'bundle.js', 10 | }, 11 | devServer: { 12 | contentBase: devPath, 13 | }, 14 | module: { 15 | loaders: [ 16 | { 17 | test: /.jsx?$/, 18 | exclude: /node_modules/, 19 | loaders: ['babel-loader', 'eslint-loader'], 20 | }, 21 | { test: /\.css$/, loader: 'style-loader!css-loader' }, 22 | ], 23 | }, 24 | resolve: { 25 | extensions: ['', '.js', '.jsx'], 26 | }, 27 | } 28 | -------------------------------------------------------------------------------- /www/utils/typography.js: -------------------------------------------------------------------------------- 1 | import Typography from 'typography' 2 | import CodePlugin from 'typography-plugin-code' 3 | 4 | const options = { 5 | scaleRatio: 1.618, 6 | baseFontSize: '18px', 7 | bodyFontFamily: ['Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'], 8 | headerFontFamily: ['Helvetica Neue', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif'], 9 | plugins: [ 10 | new CodePlugin(), 11 | ], 12 | } 13 | 14 | const typography = new Typography(options) 15 | 16 | // Hot reload typography in development. 17 | if (process.env.NODE_ENV !== 'production') { 18 | typography.injectStyles() 19 | } 20 | 21 | export default typography 22 | -------------------------------------------------------------------------------- /www/components/Breakpoint.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react' 2 | import './breakpoints.css' 3 | 4 | class Breakpoint extends Component { 5 | render () { 6 | const { mobile, children } = this.props 7 | 8 | if (mobile) { 9 | return ( 10 |
11 | {children} 12 |
13 | ) 14 | } 15 | 16 | return ( 17 |
18 | {children} 19 |
20 | ) 21 | } 22 | } 23 | 24 | Breakpoint.propTypes = { 25 | children: React.PropTypes.array, 26 | mobile: React.PropTypes.bool, 27 | } 28 | 29 | export default Breakpoint 30 | -------------------------------------------------------------------------------- /src/buttons/Google.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import GoogleIcon from '../icons/Google' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Google = (props) => { 8 | const text = props.text || 'Google+' 9 | const url = encodeURI(props.url) 10 | const fullUrl = `https://plus.google.com/share?url=${url}` 11 | 12 | return ( 13 | 20 | ) 21 | } 22 | 23 | Google.propTypes = { 24 | text: PropTypes.string, 25 | url: PropTypes.string, 26 | onClick: PropTypes.func, 27 | } 28 | 29 | export default Google 30 | -------------------------------------------------------------------------------- /src/buttons/Reddit.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import RedditIcon from '../icons/Reddit' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Reddit = (props) => { 8 | const text = props.text || 'Reddit' 9 | const url = encodeURI(props.url) 10 | const fullUrl = `https://reddit.com/submit/?url=${url}` 11 | 12 | return ( 13 | 20 | ) 21 | } 22 | 23 | Reddit.propTypes = { 24 | text: PropTypes.string, 25 | url: PropTypes.string, 26 | onClick: PropTypes.func, 27 | } 28 | 29 | export default Reddit 30 | -------------------------------------------------------------------------------- /src/buttons/Facebook.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import FacebookIcon from '../icons/Facebook' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Facebook = (props) => { 8 | const text = props.text || 'Facebook' 9 | const url = encodeURI(props.url) 10 | const fullUrl = `https://facebook.com/sharer/sharer.php?u=${url}` 11 | 12 | return ( 13 | 20 | ) 21 | } 22 | 23 | Facebook.propTypes = { 24 | text: PropTypes.string, 25 | url: PropTypes.string, 26 | onClick: PropTypes.func, 27 | } 28 | 29 | export default Facebook 30 | -------------------------------------------------------------------------------- /src/components/SharingButton.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | 4 | const SharingButton = props => ( 5 | 12 | {props.icon({ className: 'react-sharing-button__icon' })} 13 | 14 | {props.text} 15 | 16 | 17 | ) 18 | 19 | SharingButton.propTypes = { 20 | type: PropTypes.string.isRequired, 21 | icon: PropTypes.func.isRequired, 22 | text: PropTypes.string.isRequired, 23 | fullUrl: PropTypes.string.isRequired, 24 | onClick: PropTypes.func, 25 | } 26 | 27 | export default SharingButton 28 | -------------------------------------------------------------------------------- /src/buttons/Email.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import EmailIcon from '../icons/Email' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Email = (props) => { 8 | const text = props.text || 'Email' 9 | const url = encodeURI(props.url) 10 | const subject = encodeURI(props.subject) 11 | const fullUrl = `mailto:?subject=${subject}&body=${url}` 12 | 13 | return ( 14 | 21 | ) 22 | } 23 | 24 | Email.propTypes = { 25 | text: PropTypes.string, 26 | url: PropTypes.string, 27 | subject: PropTypes.string, 28 | onClick: PropTypes.func, 29 | } 30 | 31 | export default Email 32 | -------------------------------------------------------------------------------- /src/icons/Twitter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/buttons/WhatsApp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import WhatsAppIcon from '../icons/WhatsApp' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const WhatsApp = (props) => { 8 | const text = props.text || 'WhatsApp' 9 | const url = encodeURI(props.url) 10 | const message = encodeURI(props.message) 11 | const fullUrl = 'whatsapp://send?text=' + message + '%20' + url; 12 | 13 | return ( 14 | 21 | ) 22 | } 23 | 24 | WhatsApp.propTypes = { 25 | text: PropTypes.string, 26 | message: PropTypes.string, 27 | url: PropTypes.string, 28 | onClick: PropTypes.func, 29 | } 30 | 31 | export default WhatsApp 32 | -------------------------------------------------------------------------------- /src/buttons/Twitter.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import TwitterIcon from '../icons/Twitter' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Twitter = (props) => { 8 | const text = props.text || 'Twitter' 9 | const url = encodeURI(props.url) 10 | const shareText = encodeURI(props.shareText) 11 | const fullUrl = `https://twitter.com/intent/tweet/?text=${shareText}&url=${url}` 12 | 13 | return ( 14 | 21 | ) 22 | } 23 | 24 | Twitter.propTypes = { 25 | text: PropTypes.string, 26 | shareText: PropTypes.string, 27 | url: PropTypes.string, 28 | onClick: PropTypes.func, 29 | } 30 | 31 | export default Twitter 32 | -------------------------------------------------------------------------------- /src/buttons/Telegram.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import TelegramIcon from '../icons/Telegram' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Telegram = (props) => { 8 | const text = props.text || 'Telegram' 9 | const url = encodeURI(props.url) 10 | const message = encodeURI(props.message) 11 | const fullUrl = 'https://telegram.me/share/url?text=' + message + '&url=' + url; 12 | 13 | return ( 14 | 21 | ) 22 | } 23 | 24 | Telegram.propTypes = { 25 | text: PropTypes.string, 26 | message: PropTypes.string, 27 | url: PropTypes.string, 28 | onClick: PropTypes.func, 29 | } 30 | 31 | export default Telegram 32 | -------------------------------------------------------------------------------- /src/icons/WhatsApp.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/buttons/LinkedIn.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import LinkedInIcon from '../icons/LinkedIn' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const LinkedIn = (props) => { 8 | const text = props.text || 'LinkedIn' 9 | const url = encodeURI(props.url) 10 | const shareText = encodeURI(props.shareText) 11 | const fullUrl = 'https://www.linkedin.com/shareArticle?mini=true&url=' + url + '&title=' + shareText + '&summary=' + shareText + '&source=' + url; 12 | 13 | return ( 14 | 21 | ) 22 | } 23 | 24 | LinkedIn.propTypes = { 25 | text: PropTypes.string, 26 | shareText: PropTypes.string, 27 | url: PropTypes.string, 28 | onClick: PropTypes.func, 29 | } 30 | 31 | export default LinkedIn 32 | -------------------------------------------------------------------------------- /www/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "docs-site", 3 | "description": "Gatsby example site", 4 | "version": "1.0.0", 5 | "author": "Kyle Mathews ", 6 | "dependencies": { 7 | "chroma-js": "^0.7.2", 8 | "color-pairs-picker": "^1.3.5", 9 | "gatsby": "^0.12.20", 10 | "lodash": "^4.17.2", 11 | "react-document-title": "^2.0.1", 12 | "react-motion": "^0.1.0", 13 | "react-responsive-grid": "^0.3.3", 14 | "react-typography": "^0.15.0", 15 | "typography": "^0.15.0", 16 | "typography-plugin-code": "^0.15.0", 17 | "underscore.string": "^3.2.2" 18 | }, 19 | "devDependencies": { 20 | "gh-pages": "^0.12.0" 21 | }, 22 | "keywords": [ 23 | "gatsby" 24 | ], 25 | "license": "MIT", 26 | "main": "n/a", 27 | "scripts": { 28 | "test": "echo \"Error: no test specified\" && exit 1", 29 | "develop": "gatsby develop", 30 | "build": "gatsby build", 31 | "deploy": "gatsby build --prefix-links && gh-pages -d public" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/buttons/Pinterest.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import PinterestIcon from '../icons/Pinterest' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Pinterest = (props) => { 8 | const text = props.text || 'Pinterest' 9 | const url = encodeURI(props.url) 10 | const shareText = encodeURI(props.shareText) 11 | const mediaSrc = encodeURI(props.mediaSrc) 12 | const fullUrl = `https://pinterest.com/pin/create/button/?url=${url}&media=${mediaSrc}&description=${shareText}` 13 | 14 | return ( 15 | 22 | ) 23 | } 24 | 25 | Pinterest.propTypes = { 26 | text: PropTypes.string, 27 | url: PropTypes.string, 28 | shareText: PropTypes.string, 29 | mediaSrc: PropTypes.string, 30 | onClick: PropTypes.func, 31 | } 32 | 33 | export default Pinterest 34 | -------------------------------------------------------------------------------- /src/icons/Pinterest.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /src/icons/Email.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /www/.travis.yml: -------------------------------------------------------------------------------- 1 | # back to language cpp to try to bypass osx node failure 2 | language: cpp 3 | sudo: false 4 | env: 5 | - export NODE_VERSION="0.10" 6 | - export NODE_VERSION="0.12" 7 | - export NODE_VERSION="4" 8 | - export NODE_VERSION="5" 9 | os: 10 | - linux 11 | - osx 12 | # pre-install to bring in the correct version of node via nvm 13 | before_install: 14 | - git submodule update --init --recursive 15 | - git clone https://github.com/creationix/nvm.git ./.nvm 16 | - source ./.nvm/nvm.sh 17 | - nvm install $NODE_VERSION 18 | - nvm use $NODE_VERSION 19 | - npm config set python `which python` 20 | - if [ $TRAVIS_OS_NAME == "linux" ]; then 21 | export CC="gcc-4.8"; 22 | export CXX="g++-4.8"; 23 | export LINK="gcc-4.8"; 24 | export LINKXX="g++-4.8"; 25 | fi 26 | - gcc --version 27 | - g++ --version 28 | # node 4 depends on gcc 4.8 29 | addons: 30 | apt: 31 | sources: 32 | - ubuntu-toolchain-r-test 33 | packages: 34 | - g++-4.8 35 | - gcc-4.8 36 | # script needed to test, because defaults don't work on osx 37 | script: 38 | - npm install 39 | - npm run lint 40 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Kacper Golinski 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /dev/index.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { render } from 'react-dom' 3 | 4 | import '../src/main.css' 5 | 6 | import { 7 | Email, 8 | Facebook, 9 | Google, 10 | Pinterest, 11 | Reddit, 12 | Tumblr, 13 | Twitter, 14 | } from '../src' 15 | 16 | const Buttons = () => { 17 | const url = 'https://github.com/caspg' 18 | const shareText = 'check this site yo' 19 | const mediaSrc = 'http://placekitten.com/g/200/300' 20 | 21 | const tumblr = { 22 | title: 'some-title', 23 | caption: 'some-caption', 24 | content: 'some-content', 25 | } 26 | 27 | return ( 28 |
29 | 30 | 31 | 32 | 33 | 34 | 35 | 41 | 42 | 43 |
44 | ) 45 | } 46 | 47 | render( 48 | , 49 | document.getElementById('app'), 50 | ) 51 | -------------------------------------------------------------------------------- /src/buttons/Tumblr.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import PropTypes from 'prop-types' 3 | import SharingButton from '../components/SharingButton' 4 | import TumblrIcon from '../icons/Tumblr' 5 | import encodeURI from '../utils/encodeURI' 6 | 7 | const Tumblr = (props) => { 8 | const text = props.text || 'Tumblr' 9 | const url = encodeURI(props.url) 10 | const title = encodeURI(props.title) 11 | const caption = encodeURI(props.caption) 12 | const content = encodeURI(props.content) 13 | const baseUrl = 'https://www.tumblr.com/widgets/share/tool?posttype=link' 14 | const fullUrl = `${baseUrl}&title=${title}&caption=${caption}&content=${content}&canonicalUrl=${url}&shareSource=tumblr_share_button` 15 | 16 | return ( 17 | 24 | ) 25 | } 26 | 27 | Tumblr.propTypes = { 28 | text: PropTypes.string, 29 | url: PropTypes.string, 30 | title: PropTypes.string, 31 | caption: PropTypes.string, 32 | content: PropTypes.string, 33 | onClick: PropTypes.func, 34 | } 35 | 36 | export default Tumblr 37 | -------------------------------------------------------------------------------- /src/icons/Google.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /www/css/github.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | github.com style (c) Vasily Polovnyov 4 | 5 | */ 6 | .hljs-comment, 7 | .hljs-quote { 8 | color: #998; 9 | font-style: italic; 10 | } 11 | 12 | .hljs-keyword, 13 | .hljs-selector-tag, 14 | .hljs-subst { 15 | color: #333; 16 | font-weight: bold; 17 | } 18 | 19 | .hljs-number, 20 | .hljs-literal, 21 | .hljs-variable, 22 | .hljs-template-variable, 23 | .hljs-tag .hljs-attr { 24 | color: #008080; 25 | } 26 | 27 | .hljs-string, 28 | .hljs-doctag { 29 | color: #d14; 30 | } 31 | 32 | .hljs-title, 33 | .hljs-section, 34 | .hljs-selector-id { 35 | color: #900; 36 | font-weight: bold; 37 | } 38 | 39 | .hljs-subst { 40 | font-weight: normal; 41 | } 42 | 43 | .hljs-type, 44 | .hljs-class .hljs-title { 45 | color: #458; 46 | font-weight: bold; 47 | } 48 | 49 | .hljs-tag, 50 | .hljs-name, 51 | .hljs-attribute { 52 | color: #000080; 53 | font-weight: normal; 54 | } 55 | 56 | .hljs-regexp, 57 | .hljs-link { 58 | color: #009926; 59 | } 60 | 61 | .hljs-symbol, 62 | .hljs-bullet { 63 | color: #990073; 64 | } 65 | 66 | .hljs-built_in, 67 | .hljs-builtin-name { 68 | color: #0086b3; 69 | } 70 | 71 | .hljs-meta { 72 | color: #999; 73 | font-weight: bold; 74 | } 75 | 76 | .hljs-deletion { 77 | background: #fdd; 78 | } 79 | 80 | .hljs-addition { 81 | background: #dfd; 82 | } 83 | 84 | .hljs-emphasis { 85 | font-style: italic; 86 | } 87 | 88 | .hljs-strong { 89 | font-weight: bold; 90 | } 91 | 92 | -------------------------------------------------------------------------------- /src/icons/Reddit.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | /* eslint-disable max-len */ 4 | 5 | export default props => 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /test/components/SharingButton.test.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import expect from 'expect' 3 | import { configure, shallow } from 'enzyme'; 4 | import Adapter from 'enzyme-adapter-react-16'; 5 | 6 | configure({ adapter: new Adapter() }) 7 | 8 | import SharingButton from '../../src/components/SharingButton' 9 | import TwitterIcon from '../../src/icons/Twitter' 10 | 11 | describe('SharingButton component', () => { 12 | const fullUrl = 'fullUrl' 13 | const onClick = () => {} 14 | const text = 'some text' 15 | 16 | const wrapper = shallow( 17 | , 24 | ) 25 | 26 | it('render anchor tag wit correct props', () => { 27 | expect(wrapper.find('a').length).toBe(1) 28 | 29 | expect(wrapper.props().href).toBe(fullUrl) 30 | expect( 31 | wrapper.props().className, 32 | ).toBe('react-sharing-button__link react-sharing-button--twitter') 33 | expect(wrapper.props().target).toBe('_blank') 34 | expect(wrapper.props().rel).toBe('noopener noreferrer') 35 | expect(wrapper.props().onClick).toBe(onClick) 36 | }) 37 | 38 | it('render svg icon with correct class name', () => { 39 | expect( 40 | wrapper.find('svg').props().className, 41 | ).toBe('react-sharing-button__icon') 42 | }) 43 | 44 | it('render span element', () => { 45 | const spanElement = wrapper.find('span') 46 | 47 | expect(spanElement.props().className).toBe('react-sharing-button__text') 48 | expect(spanElement.text()).toBe(text) 49 | }) 50 | }) 51 | -------------------------------------------------------------------------------- /www/components/SharingButtons.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | import { config } from 'config' 4 | 5 | import { 6 | Email, 7 | Facebook, 8 | Google, 9 | Pinterest, 10 | Reddit, 11 | Tumblr, 12 | Twitter, 13 | WhatsApp, 14 | Telegram, 15 | } from '../../src' 16 | 17 | export default () => { 18 | const url = config.siteUrl 19 | const shareText = 'Lightweight social sharing buttons for React. No tracking. Just fun.' 20 | const tumblr = { 21 | title: 'React Sharingbuttons', 22 | caption: 'Lightweight social sharing buttons for React. No tracking. Just fun.', 23 | content: url, 24 | } 25 | 26 | const buttonsWrapperStyles = { 27 | padding: 50, 28 | marginTop: 75, 29 | marginBottom: 100, 30 | } 31 | 32 | return ( 33 |
34 | Code on GitHub 35 |
36 |
37 |

Lightweight social sharing buttons for React. No tracking. Just fun. Heavily inspired by sharingbuttons.io

38 | 39 |
40 | 41 | 42 | 43 | 44 | 45 | 46 | 52 | 53 | 54 | 55 | 56 | 57 |
58 |
59 | ) 60 | } 61 | -------------------------------------------------------------------------------- /www/html.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DocumentTitle from 'react-document-title' 3 | 4 | import { prefixLink } from 'gatsby-helpers' 5 | import { TypographyStyle, GoogleFont } from 'react-typography' 6 | import typography from './utils/typography' 7 | import { colors } from 'utils/colors' 8 | 9 | const BUILD_TIME = new Date().getTime() 10 | 11 | module.exports = React.createClass({ 12 | displayName: 'HTML', 13 | propTypes: { 14 | body: React.PropTypes.string, 15 | }, 16 | render () { 17 | const title = DocumentTitle.rewind() 18 | 19 | let css 20 | if (process.env.NODE_ENV === 'production') { 21 | const appStyle = require('!raw!./public/styles.css') 22 | css =