Share
is a VTEX component that allows to share a product url via social medias.
This component can be imported and used by any VTEX app.
📢 Disclaimer: Don't fork this project, use, contribute, or open issue with your feature request.
You should follow the usage instruction in the main README.
Then, add share
block into your app theme, as we do in our Product Details app.
When implementing this component as a block, various inner blocks may be available. The following interface lists the available blocks within Share
and describes if they are required or optional.
"share": {
"component": "Share"
}
For now this block does not have any required or optional blocks.
Through the Storefront, you can change the Share
's behavior and interface. However, you also can make in your theme app, as Store theme does.
Prop name | Type | Description | Default value |
---|---|---|---|
className |
String |
The main container classes | null |
shareLabelClass |
String |
The share label classes | true |
buttonsContainerClass |
String |
The button container classes | true |
options |
Options |
Share button options, like "size" | {} |
social |
Social |
The possible social medias to be displayed | {Facebook: true, Twitter: true, WhatsApp: true, Pinterest: true} |
imageUrl |
String |
Image url to share in social medias |
Options:
Prop name | Type | Description |
---|---|---|
size |
Number |
The size of the share button in pixels |
Social:
Prop name | Type | Description |
---|---|---|
Facebook |
Boolean |
If facebook social media will be shown |
Twitter |
Boolean |
If twitter social media will be shown |
WhatsApp |
Boolean |
If whatsApp social media will be shown |
You should follow the Styles API instruction in the main README.
Below, we describe the namespace that are defined in the Share
.
Class name | Description | Component Source |
---|---|---|
shareContainer |
The main container of Share |
index |
shareLoader |
The share loader | index |
shareLabel |
The share label | index |
shareButtons |
The main container of social media buttons | index |
shareSocialButton |
The share social media button | index |
shareSocialIcon |
The share social media icon | index |