Skip to content

Commit e2badf8

Browse files
harshzalavadiyaharshzalavadiya
committed
🎉 initial code
0 parents  commit e2badf8

File tree

21 files changed

+12915
-0
lines changed

21 files changed

+12915
-0
lines changed

‎.github/workflows/main.yml‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
name: NodeJS
2+
on: [push]
3+
jobs:
4+
build:
5+
runs-on: ubuntu-latest
6+
7+
steps:
8+
- name: Begin CI...
9+
uses: actions/checkout@v2
10+
11+
- name: Use Node 12
12+
uses: actions/setup-node@v1
13+
with:
14+
node-version: 12.x
15+
16+
- name: Use cached node_modules
17+
uses: actions/cache@v1
18+
with:
19+
path: node_modules
20+
key: nodeModules-${{ hashFiles('**/yarn.lock') }}
21+
restore-keys: |
22+
nodeModules-
23+
24+
- name: Install dependencies
25+
run: yarn install --frozen-lockfile
26+
env:
27+
CI: true
28+
29+
- name: Build
30+
run: yarn build
31+
env:
32+
CI: true
33+
34+
- name: Publish
35+
if: startsWith(github.ref, 'refs/tags/')
36+
run: echo "//registry.npmjs.org/:_authToken=$NPM_AUTH_TOKEN" > ~/.npmrc && npm publish --access public
37+
env:
38+
NPM_AUTH_TOKEN: ${{ secrets.NPM_AUTH_TOKEN }}

‎.gitignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
*.log
2+
.DS_Store
3+
node_modules
4+
.cache
5+
dist
6+
storybook-static

‎.storybook/main.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
module.exports = {
2+
stories: ['../stories/**/*.stories.(ts|tsx)'],
3+
addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-docs'],
4+
webpackFinal: async (config) => {
5+
config.module.rules.push({
6+
test: /\.(ts|tsx)$/,
7+
use: [
8+
{
9+
loader: require.resolve('ts-loader'),
10+
options: {
11+
transpileOnly: true,
12+
},
13+
},
14+
{
15+
loader: require.resolve('react-docgen-typescript-loader'),
16+
},
17+
],
18+
});
19+
20+
config.resolve.extensions.push('.ts', '.tsx');
21+
22+
return config;
23+
},
24+
};

‎LICENSE‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 Harsh Zalavadiya
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.

‎README.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# react-web-share
2+
3+
Tiny [Web Share API](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/share) wrapper with fallback for unsupported browsers
4+
5+
[![GitHub Actions Status](https://github.com/harshzalavadiya/react-web-share/workflows/NodeJS/badge.svg)](https://github.com/harshzalavadiya/react-web-share/actions)
6+
[![NPM](https://img.shields.io/npm/v/react-web-share.svg)](https://npm.im/react-web-share)
7+
[![gzip](https://badgen.net/bundlephobia/minzip/react-web-share@latest)](https://bundlephobia.com/result?p=react-web-share@latest)
8+
9+
[![Edit react-web-share](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-web-share-46skt?fontsize=14&hidenavigation=1&theme=dark)
10+
11+
> 💡 most browsers will restrict web share api only to https websites
12+
13+
## ✨ Features
14+
15+
- 🍃 Only ~3kb gzipped and no external dependencies
16+
- ✌ Written w/ TypeScript
17+
18+
## 🔧 Installation
19+
20+
```bash
21+
npm i react-web-share # npm
22+
yarn add react-web-share # yarn
23+
```
24+
25+
## Preview
26+
27+
### Mobile
28+
29+
![Mobile Preview](preview/preview-mobile.jpg)
30+
31+
### Desktop
32+
33+
![Desktop Preview](preview/preview-desktop.jpg)
34+
35+
## 📦 Example
36+
37+
```tsx
38+
import React, { useState } from "react";
39+
import { RWebShare } from "react-web-share";
40+
41+
const Example = () => {
42+
return (
43+
<div>
44+
<RWebShare
45+
data={{
46+
text: "Like humans, flamingos make friends for life",
47+
url: "https://bit.ly/2UWTnlL",
48+
title: "Share this article on Flamingos",
49+
}}
50+
>
51+
<button>Share 🔗</button>
52+
</RWebShare>
53+
</div>
54+
);
55+
};
56+
57+
export default Example;
58+
```
59+
60+
## 👀 Props
61+
62+
| Prop | Description | Type | Default |
63+
| --------- | ------------ | -------------------- | --------------------------------------------- |
64+
| `data` | Share Object | `{text, url, title}` | `{text: "", url: currentURL, title: "Share"}` |
65+
| `options` | sites | `string[]` | all available social sites |
66+
67+
## 🤠 Credits
68+
69+
- [TypeScript](https://github.com/microsoft/typescript)
70+
- [TSDX](https://github.com/jaredpalmer/tsdx)
71+
72+
## 📜 License
73+
74+
MIT &copy; [harshzalavadiya](https://github.com/harshzalavadiya)

‎package.json‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"name": "react-web-share",
3+
"author": "Harsh Zalavadiya",
4+
"version": "1.0.0",
5+
"license": "MIT",
6+
"repository": "harshzalavadiya/react-web-share",
7+
"module": "dist/react-web-share.esm.js",
8+
"main": "dist/index.js",
9+
"typings": "dist/index.d.ts",
10+
"files": [
11+
"dist",
12+
"src"
13+
],
14+
"engines": {
15+
"node": ">=10"
16+
},
17+
"scripts": {
18+
"start": "tsdx watch",
19+
"build": "tsdx build && filesize",
20+
"lint": "tsdx lint",
21+
"prepare": "tsdx build && filesize",
22+
"storybook": "start-storybook -p 6006",
23+
"build-storybook": "build-storybook"
24+
},
25+
"dependencies": {},
26+
"peerDependencies": {
27+
"react": ">=16"
28+
},
29+
"devDependencies": {
30+
"@ampproject/filesize": "^4.2.0",
31+
"@babel/core": "^7.9.0",
32+
"@storybook/addon-actions": "^5.3.18",
33+
"@storybook/addon-docs": "^5.3.18",
34+
"@storybook/addon-info": "^5.3.18",
35+
"@storybook/addon-links": "^5.3.18",
36+
"@storybook/addons": "^5.3.18",
37+
"@storybook/react": "^5.3.18",
38+
"@types/react": "^16.9.34",
39+
"@types/react-dom": "^16.9.7",
40+
"babel-loader": "^8.1.0",
41+
"husky": "^4.2.5",
42+
"react": "^16.13.1",
43+
"react-docgen-typescript-loader": "^3.7.2",
44+
"react-dom": "^16.13.1",
45+
"react-is": "^16.13.1",
46+
"ts-loader": "^7.0.1",
47+
"tsdx": "^0.13.2",
48+
"tslib": "^1.11.1",
49+
"typescript": "^3.8.3"
50+
},
51+
"husky": {
52+
"hooks": {
53+
"pre-commit": "tsdx lint"
54+
}
55+
},
56+
"prettier": {
57+
"printWidth": 100,
58+
"semi": true,
59+
"singleQuote": false,
60+
"trailingComma": "es5"
61+
},
62+
"filesize": {
63+
"track": [
64+
"./dist/*.production.min.js"
65+
]
66+
}
67+
}

‎preview/preview-desktop.jpg‎

18.2 KB
Loading

‎preview/preview-mobile.jpg‎

13.4 KB
Loading

‎src/components/backdrop.tsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { CSSProperties } from "react";
2+
3+
const BackdropContainerStyle: CSSProperties = {
4+
position: "fixed",
5+
left: 0,
6+
top: 0,
7+
width: "100%",
8+
height: "100%",
9+
background: "rgba(0, 0, 0, 0.4)",
10+
display: "flex",
11+
flexDirection: "column",
12+
alignItems: "center",
13+
justifyContent: "flex-end",
14+
zIndex: 1400,
15+
};
16+
17+
const inEffect = `.web-share-fade{animation-name:simpleFade;animation-duration:.2s;animation-fill-mode:both}@keyframes simpleFade{0%{opacity:0}100%{opacity:1}}.web-share-fade-in-up{animation-name:fadeInUp;animation-duration:.45s;animation-fill-mode:both}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}`;
18+
19+
export default function Backdrop({ children, onClose }) {
20+
const handleOnClose = e => {
21+
if (e.target === e.currentTarget) {
22+
onClose(e);
23+
}
24+
};
25+
26+
return (
27+
<div onClick={handleOnClose} className="web-share-fade" style={BackdropContainerStyle}>
28+
<style children={inEffect} />
29+
{children}
30+
</div>
31+
);
32+
}

‎src/components/close.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React, { CSSProperties } from "react";
2+
3+
const CloseStyle: CSSProperties = {
4+
background: "#edf2f7",
5+
cursor: "pointer",
6+
padding: "0.75rem",
7+
display: "block",
8+
width: "100%",
9+
border: 0,
10+
fontSize: "1rem",
11+
};
12+
13+
export default function CloseButton({ onClose }) {
14+
return (
15+
<button style={CloseStyle} aria-label="Close" type="button" onClick={onClose}>
16+
Close
17+
</button>
18+
);
19+
}

0 commit comments

Comments
 (0)