STEP-10 SocialShare Component Development
And we ready to develop our SocialShare component
​STEP-10​
  1. 1.
    We need to add react share package, for that modifying your extension package.json
scandipwa/packages/scandipwa-socialshare/package.json
1
{
2
"name": "scandipwa-socialshare",
3
"version": "0.0.1",
4
"license": "OSL-3.0",
5
"scandipwa": {
6
"type": "extension"
7
},
8
"dependencies": {
9
"react-share": "4.4.0"
10
},
11
"eslintConfig": {
12
"extends": "@scandipwa"
13
}
14
}
Copied!
2. Run npm install at theme folder, in order to pull packages, then restart frontend
3. Create SocialShare.config.js in SOURCE/component/SocialShare
scandipwa-socialshare/src/component/SocialShare/SocialShare.config.js
1
export const FACEBOOK = 'facebook';
2
export const FACEBOOK_MSG = 'facebook_messenger';
3
export const TELEGRAM = 'telegram';
4
export const WHATSAPP = 'whatsapp';
5
export const LINKEDIN = 'linkedin';
6
export const EMAIL = 'email';
Copied!
4. Modify SocialShare.component.js
scandipwa-socialshare/src/component/SocialShare/SocialShare.component.js
1
import PropTypes from 'prop-types';
2
import { PureComponent } from 'react';
3
import {
4
EmailIcon,
5
EmailShareButton,
6
FacebookIcon,
7
FacebookMessengerIcon,
8
FacebookMessengerShareButton,
9
FacebookShareButton,
10
FacebookShareCount,
11
LinkedinIcon,
12
LinkedinShareButton,
13
TelegramIcon,
14
TelegramShareButton,
15
WhatsappIcon,
16
WhatsappShareButton
17
} from 'react-share';
18
​
19
import {
20
EMAIL,
21
FACEBOOK,
22
FACEBOOK_MSG,
23
LINKEDIN,
24
TELEGRAM,
25
WHATSAPP
26
} from './SocialShare.config';
27
​
28
import './SocialShare.style';
29
​
30
/** @namespace ScandipwaSocialshare/Component/SocialShare/Component/SocialShareComponent */
31
export class SocialShareComponent extends PureComponent {
32
static propTypes = {
33
providers: PropTypes.arrayOf(PropTypes.shape({})).isRequired,
34
size: PropTypes.string.isRequired,
35
isRounded: PropTypes.bool.isRequired,
36
quote: PropTypes.string.isRequired
37
};
38
​
39
renderMap = {
40
[FACEBOOK]: {
41
render: (counter, additional, shareUrl) => this.renderFaceBook(counter, additional, shareUrl)
42
},
43
[EMAIL]: {
44
render: (counter, additional, shareUrl) => this.renderEmail(counter, additional, shareUrl)
45
},
46
[FACEBOOK_MSG]: {
47
render: (counter, additional, shareUrl) => this.renderMessenger(counter, additional, shareUrl)
48
},
49
[TELEGRAM]: {
50
render: (counter, additional, shareUrl) => this.renderTelegram(counter, additional, shareUrl)
51
},
52
[WHATSAPP]: {
53
render: (counter, additional, shareUrl) => this.renderWhatsApp(counter, additional, shareUrl)
54
},
55
[LINKEDIN]: {
56
render: (counter, additional, shareUrl) => this.renderLinkedIn(counter, additional, shareUrl)
57
}
58
};
59
​
60
renderLinkedIn(counter, additional, shareUrl) {
61
const { size, isRounded } = this.props;
62
​
63
return (
64
<LinkedinShareButton
65
url={ shareUrl }
66
>
67
<LinkedinIcon
68
size={ size }
69
round={ isRounded }
70
/>
71
</LinkedinShareButton>
72
);
73
}
74
​
75
renderFaceBook(counter, _, shareUrl) {
76
const { size, isRounded, quote } = this.props;
77
​
78
return (
79
<>
80
<FacebookShareButton
81
url={ shareUrl }
82
quote={ quote }
83
>
84
<FacebookIcon
85
size={ size }
86
round={ isRounded }
87
/>
88
</FacebookShareButton>
89
{ this.renderFaceBookCounter(counter, shareUrl) }
90
</>
91
);
92
}
93
​
94
renderMessenger(counter, additional, shareUrl) {
95
const { size, isRounded } = this.props;
96
​
97
return (
98
<FacebookMessengerShareButton
99
url={ shareUrl }
100
appId={ additional }
101
>
102
<FacebookMessengerIcon
103
size={ size }
104
round={ isRounded }
105
/>
106
</FacebookMessengerShareButton>
107
);
108
}
109
​
110
renderTelegram(counter, additional, shareUrl) {
111
const { size, isRounded, quote } = this.props;
112
​
113
return (
114
<TelegramShareButton
115
url={ shareUrl }
116
title={ quote }
117
>
118
<TelegramIcon
119
size={ size }
120
round={ isRounded }
121
/>
122
</TelegramShareButton>
123
);
124
}
125
​
126
renderWhatsApp(counter, additional, shareUrl) {
127
const { size, isRounded, quote } = this.props;
128
​
129
return (
130
<WhatsappShareButton
131
url={ shareUrl }
132
title={ quote }
133
separator=" | "
134
>
135
<WhatsappIcon
136
size={ size }
137
round={ isRounded }
138
/>
139
</WhatsappShareButton>
140
);
141
}
142
​
143
// Counter is not working for now https://github.com/nygardk/react-share/issues/347
144
// TODO: Update package when issue will be fixed
145
renderFaceBookCounter(counter, shareUrl) {
146
if (!counter) {
147
return null;
148
}
149
​
150
return (
151
<FacebookShareCount url={ shareUrl }>
152
{ (count) => count }
153
</FacebookShareCount>
154
);
155
}
156
​
157
renderEmail(counter, additional, shareUrl) {
158
const { size, isRounded, quote } = this.props;
159
​
160
return (
161
<EmailShareButton
162
url={ shareUrl }
163
subject={ `${additional} | ${quote}` }
164
>
165
<EmailIcon size={ size } round={ isRounded } />
166
</EmailShareButton>
167
);
168
}
169
​
170
renderProvider(provider) {
171
const shareUrl = window.location.href;
172
const { id, counter, additional } = provider;
173
const { render } = this.renderMap[id];
174
​
175
return (
176
<div block="SocialShare" elem="Provider">
177
{ render(counter, additional, shareUrl) }
178
</div>
179
);
180
}
181
​
182
render() {
183
const { providers } = this.props;
184
​
185
return (
186
<div block="SocialShare">
187
{ providers.map((provider) => this.renderProvider(provider)) }
188
</div>
189
);
190
}
191
}
192
​
193
export default SocialShareComponent;
Copied!
5. Modify SocialShare.style.scss
1
.SocialShare {
2
width: 100%;
3
display: flex;
4
flex-direction: row;
5
justify-content: space-around;
6
​
7
&-Provider {
8
margin-right: 10px;
9
}
10
}
Copied!
6. Go to you Frontend and check the result
Mobile
​
​
Desktop
Could not load image
Copy link