A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

Overview

simple-sharer [by BUILDBROTHERS.COM]

A javascript framework to share url to social media sites like facebook, twitter, reddit, whastapp in an easy and simple way.

Supported Javascript Frameworks:

  • React
  • Vue
  • Angular

Features

  • Share url to Facebook
  • Share url to Reddit
  • Share url to Whatsapp
  • Share url to Twitter
  • Copy url to clipboard

Simple-sharer is a lightweight javascript (<4KB) client-side framework, which makes it very easy and simple to share url to various social media sites. Simple-sharer is created by BuildBrothers.com

Here is how to get started with simple-sharer.

Installation

Install using NPM

npm i simple-sharer

Install using yarn

yarn add simple-sharer

1st Example with React.js

) } export default App; ">
import React from 'react'
import { simplesharer } from "simple-sharer";

function App(){
    const sh = new simplesharer()
    sh.url = 'www.buildbrothers.com' //your url
    sh.title = "Build Brothers Website" //title for Reddit, this is optional
    sh.text = 'Passionate Mobile and Web Apps Development Team' // description for twitter, not more than a hundred characters, optional.
    sh.hashtags = ['buildbrothers', 'bb', 'software dev team'] // a list of hashtags for twitter,also optional

    return (
    <div>
        <button onClick={()=> sh.share('facebook') }>Share on Facebook</button>
        <button onClick={()=> sh.share('twitter') }>Share on Twitter</button>
        <button onClick={()=> sh.share('whatsapp') }>Share on Whatsapp</button>
        <button onClick={()=> sh.share('reddit') }>Share on Reddit</button>
        <button onClick={()=> sh.copy() }>Copy Link</button>
    </div>
    )
}
export default App;

2nd Example with React.js

// if no url is provided, it will use the current url on the address bar.
) } export default App; ">
import React from 'react'
import { simplesharer } from "simple-sharer";

function App(){
    return (
    <div>
        <button onClick={()=> simplesharer.Facebook({url: 'www.buildbrothers.com'})}>Share on Facebook</button>
        <button onClick={()=> simplesharer.Twitter({url:'www.buildbrothers.com', text: 'Passionate Mobile and Web Apps  Development Team', hashtags: ['buildbrothers', 'bb', 'software dev team']}) }>Share on Twitter</button>
        // if no url is provided, it will use the current url on the address bar.
        <button onClick={()=> simplesharer.Whatsapp() }>Share on Whatsapp</button>
        <button onClick={()=> simplesharer.Reddit({title: 'Build Brothers Website'}) }>Share on Reddit</button>
        <button onClick={()=> simplesharer.Copy() }>Copy Link</button>
    </div>
    )
}
export default App;

Note:

By default simple-sharer pop up a new window while sharing url, to use the parent window, you can change the target like this;

const sh = new simplesharer()
sh.target = "_parent" //by default the target is _blank

When no url is defined, simple-sharer uses the current url of the page.

License

This program is licensed under the GNU GENERAL PUBLIC LICENSE Version 3, 29 June 2007. Please read the LICENSE.txt text document included with the source code if you would like to read the terms of the license.

You might also like...
A React component for viewing an STL object from a given URL by utilizing Three.js

React STL Viewer New maintainer needed. A React component for viewing an STL object from a given URL by utilizing Three.js Looking for contributors Se

Lift a React component's state into the url
Lift a React component's state into the url

with-url-state Lifts the state out of a react component and into the url Hooks There is a hook based api available on the 3.0.0 branch, published as a

A React Library to update API url with query parameters by looking at query parameters in the browser.
A React Library to update API url with query parameters by looking at query parameters in the browser.

A React Library to update API url with query parameters by looking at query parameters in the browser.

A simple tool to view Facebook Messenger exported JSON files
A simple tool to view Facebook Messenger exported JSON files

Facebook Messenger exported JSON viewer What's this? This is a simple tool to view Facebook Messenger exported JSON files. I made the UI into a Messen

A web application that allows you to create and share wall of gifs! Built on top of solana blockchain.

Wall of gif with Solana A web application that allows you to create and share wall of gifs! Built on top of solana blockchain. Installation and Usage

Share code between different parts of your full-stack app
Share code between different parts of your full-stack app

Dryduck Every programmer knows dry. Don't repeat yourself. So why repeat yourself across platforms, writing the same thing twice? Dryduck is a tool fo

:fire: An extremely fast, React-like JavaScript library for building modern user interfaces
:fire: An extremely fast, React-like JavaScript library for building modern user interfaces

Inferno is an insanely fast, React-like library for building high-performance user interfaces on both the client and server. Description The main obje

A simple React component to reproduce the way iOS deletes an item in a list
A simple React component to reproduce the way iOS deletes an item in a list

react-swipe-to-delete-ios A simple React component to reproduce the way iOS deletes an item in a list. Demo Installation yarn add react-swipe-to-delet

An one-of-a-kind social network

An one-of-a-kind social network

Owner
null
Facebook components like a Login button, Like, Share, Chat, Comments, Page or Embedded Post

React Facebook Components Components Facebook provider (provide settings to child components) Login button (provide user profile and signed request) L

Zlatko Fedor 739 Nov 16, 2022
Simplest way to add twitter widgets to your react project.

React Twitter Embed Component React Twitter Embed Component Simplest way to add Twitter Widgets to your react project. Demo and Examples https://saura

Saurabh Nemade 297 Nov 6, 2022
A simple way to write re-usable features with React + EffectorA simple way to write re-usable features with React + Effector

Effector Factorio The simplest way to write re-usable features with React + Effector Install npm install effector-factorio Why this? People became to

Anton Kosykh 33 Nov 19, 2022
Image Sharing Social Media App Built Using React

ShareMe Social Media Application Introduction This is a code repository for the

Adrian Hajdin - JavaScript Mastery 1.2k Nov 17, 2022
😊😎My first React+Firebase social media📱 clone

This project was bootstrapped with Create React App. An amazing mern instagram clone built using react js for frontend and firebase for backend ?? ??

Ashutosh Mohanty 7 Apr 14, 2022
Blockchain-Cryptogram - Decentralized Social Media web app using Ethereum Blockchain

Decentralized Social Media web app using Ethereum Blockchain. Team Details Team

achyut 10 Jul 24, 2022
null 1 Apr 28, 2022
Jed Saylor minting dapp is a quick and easy way to connect your smart contract and start minting NFTs.

Welcome to Jed Saylor ?? All the code in these repos was created and explained by Jed Saylor on his course. To find help please visit: ?? Instagram Je

null 1 Nov 26, 2021
:speech_balloon: Easy way to create conversation chats

React Simple Chatbot A simple chatbot component to create conversation chats Getting Start npm install react-simple-chatbot --save Usage There are sev

Lucas Bassetti 1.5k Nov 23, 2022
An easy way to build Rarity games with React

rarity-react An easy way to build Rarity games with React. It started with a simple app... I wanted to see my summoners and the prizes they'd won whil

murderteeth 7 Sep 15, 2022