Skip to content

Add custom attributes on network buttons #24

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add custom attributes on network buttons #24

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6056e07
feat: Add option object to individual network
lucasflomuller Sep 16, 2020
5bceadf
feat: Change custom logo
lucasflomuller Sep 16, 2020
ed71f7b
docs: Update readme
lucasflomuller Sep 16, 2020
b5d96b3
feat: Add icons as separate property in config
lucasflomuller Oct 19, 2020
7feadee
feat: Add icons as props
lucasflomuller Oct 19, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
65 changes: 60 additions & 5 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# sharethis-reactjs
# sharethis-reactjs

![alt text][logo]

Expand Down Expand Up @@ -121,7 +121,7 @@ class App extends React.Component {
action_enable: true, // show/hide call to action (true, false)
action_pos: 'bottom', // position of call to action (left, top, right)
alignment: 'center', // alignment of buttons (left, center, right)
color: 'white', // set the color of buttons (social, white)
color: 'white', // set the color of buttons (social, white)
enabled: true, // show/hide buttons (true, false)
networks: [ // which networks to include (see FOLLOW NETWORKS)
'twitter',
Expand All @@ -136,7 +136,7 @@ class App extends React.Component {
instagram: 'sharethis',
youtube: '/channel/UCbM93niCmdc2RD9RZbLMP6A?view_as=subscriber'
},
radius: 9, // the corner radius on each button (INTEGER)
radius: 16, // the corner radius on each button (INTEGER)
size: 32, // the size of each button (INTEGER)
spacing: 8 // the spacing between buttons (INTEGER)
}}
Expand All @@ -154,7 +154,7 @@ class App extends React.Component {
language: 'en', // which language to use (see LANGUAGES)
min_count: 0, // hide react counts less than min_count (INTEGER)
networks: [ // which networks to include (see SHARING NETWORKS)
'linkedin',
'linkedin', // network without options
'facebook',
'twitter',
'pinterest',
Expand All @@ -180,6 +180,61 @@ class App extends React.Component {
}}
/>


<StickyShareButtons
icons={{
twitter: { // options applied to the icons
src: 'https://pbs.twimg.com/profile_images/531381005165158401/bUJYaSO9_400x400.png',
style: {
objectFit: 'contain'
}
}
}}
config={{
alignment: 'right', // alignment of buttons (left, right)
color: 'social', // set the color of buttons (social, white)
enabled: true, // show/hide buttons (true, false)
font_size: 16, // font size for the buttons
hide_desktop: false, // hide buttons on desktop (true, false)
labels: 'counts', // button labels (cta, counts, null)
language: 'en', // which language to use (see LANGUAGES)
min_count: 0, // hide react counts less than min_count (INTEGER)
networks: [ // which networks to include (see SHARING NETWORKS)
'linkedin', // network without options
'facebook',
['twitter', { // network with options
text: { // options applied to the span of the text
style: {
color: 'black'
}
},
container: { // options applied to the span of the container
style: {
backgroundColor: 'white',
}
}
}],
'pinterest',
'email'
],
padding: 12, // padding within buttons (INTEGER)
radius: 4, // the corner radius on each button (INTEGER)
show_total: true, // show/hide the total share count (true, false)
show_mobile: true, // show/hide the buttons on mobile (true, false)
show_toggle: true, // show/hide the toggle buttons (true, false)
size: 48, // the size of each button (INTEGER)
top: 160, // offset in pixels from the top of the page

// OPTIONAL PARAMETERS
url: 'https://www.sharethis.com', // (defaults to current url)
image: 'https://bit.ly/2CMhCMC', // (defaults to og:image or twitter:image)
description: 'custom text', // (defaults to og:description or twitter:description)
title: 'custom title', // (defaults to og:title or twitter:title)
message: 'custom email text', // (only for email sharing)
subject: 'custom email subject', // (only for email sharing)
username: 'custom twitter handle' // (only for twitter sharing)
}}
/>
</div>
);
}
Expand Down Expand Up @@ -232,4 +287,4 @@ slight_smile, heart_eyes, laughing, astonished, sob, rage
```

Open `localhost:5000`

57 changes: 56 additions & 1 deletion demo/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ class App extends React.Component {
language: 'en', // which language to use (see LANGUAGES)
min_count: 0, // hide react counts less than min_count (INTEGER)
networks: [ // which networks to include (see SHARING NETWORKS)
'linkedin',
'linkedin', // network without options
'facebook',
'twitter',
'pinterest',
Expand All @@ -150,6 +150,61 @@ class App extends React.Component {
}}
/>


<StickyShareButtons
icons={{
twitter: { // options applied to the icons
src: 'https://pbs.twimg.com/profile_images/531381005165158401/bUJYaSO9_400x400.png',
style: {
objectFit: 'contain'
}
}
}}
config={{
alignment: 'right', // alignment of buttons (left, right)
color: 'social', // set the color of buttons (social, white)
enabled: true, // show/hide buttons (true, false)
font_size: 16, // font size for the buttons
hide_desktop: false, // hide buttons on desktop (true, false)
labels: 'counts', // button labels (cta, counts, null)
language: 'en', // which language to use (see LANGUAGES)
min_count: 0, // hide react counts less than min_count (INTEGER)
networks: [ // which networks to include (see SHARING NETWORKS)
'linkedin', // network without options
'facebook',
['twitter', { // network with options
text: { // options applied to the span of the text
style: {
color: 'black'
}
},
container: { // options applied to the span of the container
style: {
backgroundColor: 'white',
}
}
}],
'pinterest',
'email'
],
padding: 12, // padding within buttons (INTEGER)
radius: 4, // the corner radius on each button (INTEGER)
show_total: true, // show/hide the total share count (true, false)
show_mobile: true, // show/hide the buttons on mobile (true, false)
show_toggle: true, // show/hide the toggle buttons (true, false)
size: 48, // the size of each button (INTEGER)
top: 160, // offset in pixels from the top of the page

// OPTIONAL PARAMETERS
url: 'https://www.sharethis.com', // (defaults to current url)
image: 'https://bit.ly/2CMhCMC', // (defaults to og:image or twitter:image)
description: 'custom text', // (defaults to og:description or twitter:description)
title: 'custom title', // (defaults to og:title or twitter:title)
message: 'custom email text', // (only for email sharing)
subject: 'custom email subject', // (only for email sharing)
username: 'custom twitter handle' // (only for twitter sharing)
}}
/>
</div>
);
}
Expand Down
9 changes: 6 additions & 3 deletions src/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
declare module "sharethis-reactjs" {
type SharingNetwork =
type Network =
| "blogger"
| "delicious"
| "digg"
Expand Down Expand Up @@ -27,7 +27,10 @@ declare module "sharethis-reactjs" {
| "whatsapp"
| "xing";

type FollowNetwork =
type SharingNetwork =
| Network | [Network, object]

type FollowNetwork =
| "blogger"
| "digg"
| "facebook"
Expand Down Expand Up @@ -55,7 +58,7 @@ declare module "sharethis-reactjs" {
| "yelp"
| "youtube";

type Reaction =
type Reaction =
| "slight_smile"
| "heart_eyes"
| "laughing"
Expand Down
Loading