Página Inicial>Relacionado com a programação>Código-Fonte de IA
Baixar

Próximo compartilhamento

Os botões de compartilhamento de mídia social para seus próximos aplicativos React.

? Características

  • Sem dependências
  • Compatível com JavaScript e TypeScript
  • Compartilhe botões para o seu próximo aplicativo React
    • Facebook
    • Linha
    • Pinterest
    • Reddit
    • Telegrama
    • Tumblr
    • Twitter
    • Viber
    • Weibo
    • Whatsapp
    • LinkedIn
    • Vkshare
    • Mailru
    • LiveJournal
    • Local de trabalho
    • Bolso
    • Instapaper
    • Hatena
    • FacebookMessenger
    • E-mail
    • Gab
  • Contagem de ações
    • FacebookShareCount
    • HatenashareCount
    • OKSHARECOUNT
    • PinterestshareCount
    • TumblrshareCount
    • VkshareCount
  • Ícones

? Instalar

O próximo compartilhamento está disponível no NPM. Pode ser instalado com o seguinte comando: 

 npm install next-share --save

O próximo compartilhamento também está disponível em fios. Pode ser instalado com o seguinte comando: 

 yarn add next-share --save

Uso do ShareButton

? Facebook

? ‍ Código 

 import {
  FacebookShareButton ,
  FacebookIcon ,
} from 'next-share'

< FacebookShareButton
  url = { 'https://github.com/next-share' }
  quote = { 'next-share is a social share buttons for your next React apps.' }
  hashtag = { '#nextshare' }
>
  < FacebookIcon size = { 32 } round />
</ FacebookShareButton >

FacebookshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
citar corda Uma cotação a ser compartilhada.
hashtag corda Hashtag para ser compartilhado.
largura de janela número 550 Largura da janela aberta.
WindowHesed número 400 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Facebook APS

? Linha

? ‍ Código 

 import {
  LineShareButton ,
  LineIcon ,
} from 'next-share'

< LineShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
>
  < LineIcon />
</ LineShareButton >

Adereços de lineareButton

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
largura de janela número 500 Largura da janela aberta.
WindowHesed número 500 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adeços de Lineicon

? Pinterest

? ‍ Código 

 import {
  PinterestShareButton ,
  PinterestIcon ,
} from 'next-share'

< PinterestShareButton
  url = { 'https://github.com/next-share' }
  media = { 'next-share is a social share buttons for your next React apps.' }
>
  < PinterestIcon size = { 32 } round />
</ PinterestShareButton >

PinterestshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
mídia corda O URL da imagem que será fixado. ✅
descrição corda A descrição da mídia compartilhada.
largura de janela número 1000 Largura da janela aberta.
WindowHesed número 730 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Aderetes do Pinteesticon

? Reddit

? ‍ Código 

 import {
  RedditShareButton ,
  RedditIcon ,
} from 'next-share'

< RedditShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
>
  < RedditIcon size = { 32 } round />
</ RedditShareButton >

RedditshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
largura de janela número 660 Largura da janela aberta.
WindowHesed número 460 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Redditicon adereços

? Telegrama

? ‍ Código 

 import {
  TelegramShareButton ,
  TelegramIcon ,
} from 'next-share'

< TelegramShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
>
  < TelegramIcon size = { 32 } round />
</ TelegramShareButton >

TelegramshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
largura de janela número 550 Largura da janela aberta.
WindowHesed número 400 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adereços de telegramas

? Tumblr

? ‍ Código 

 import {
  TumblrShareButton ,
  TumblrIcon ,
} from 'next-share'

< TumblrShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
>
  < TumblrIcon size = { 32 } round />
</ TumblrShareButton >

TumblrshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
tags Array<string>
rubrica corda A descrição da página compartilhada.
pós -tipo corda link
largura de janela número 660 Largura da janela aberta.
WindowHesed número 460 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adereços de Tumblicon

? Twitter

? ‍ Código 

 import {
  TwitterShareButton ,
  TwitterIcon ,
} from 'next-share'

< TwitterShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
>
  < TwitterIcon size = { 32 } round />
</ TwitterShareButton >

Twitter -shareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
via corda
hashtags variedade
relacionado variedade
largura de janela número 550 Largura da janela aberta.
WindowHesed número 400 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Twittericon adereços

? Viber

? ‍ Código 

 import {
  ViberShareButton ,
  ViberIcon ,
} from 'next-share'

< ViberShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
>
  < ViberIcon size = { 32 } round />
</ ViberShareButton >

VibershareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
separador
largura de janela número 660 Largura da janela aberta.
WindowHesed número 460 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adeços de Vibericon

? Weibo

? ‍ Código 

 import {
  WeiboShareButton ,
  WeiboIcon ,
} from 'next-share'

< WeiboShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
  image = { ` ${ String ( window . location ) } / ${ example - image } ` }
>
  < WeiboIcon size = { 32 } round />
</ WeiboShareButton >

WeiboshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
imagem corda O URL da imagem que será compartilhado.
largura de janela número 660 Largura da janela aberta.
WindowHesed número 550 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Weiboicon adereços

? Whatsapp

? ‍ Código 

 import {
  WhatsappShareButton ,
  WhatsappIcon ,
} from 'next-share'

< WhatsappShareButton
  url = { 'https://github.com/next-share' }
  title = { 'next-share is a social share buttons for your next React apps.' }
  separator = ":: "
>
  < WhatsappIcon size = { 32 } round />
</ WhatsappShareButton >

Whatsappsharebutton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
separador corda
largura de janela número 550 Largura da janela aberta.
WindowHesed número 400 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Whatsappicon adereços

? LinkedIn

? ‍ Código 

 import {
  LinkedinShareButton ,
  LinkedinIcon ,
} from 'next-share'

< LinkedinShareButton url = { 'https://github.com/next-share' } >
  < LinkedinIcon size = { 32 } round />
</ LinkedinShareButton >

LinkedinshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
largura de janela número 750 Largura da janela aberta.
WindowHesed número 600 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Como você usa coisas como title , summary , etc.?

og tags OG no bloco <head> do HTML. 

 < meta property =' og:image ' content ='' />
< meta property =' og:title ' content ='' />
< meta property =' og:description ' content ='' />

Adereços do Linkedinicon

? Vk

? ‍ Código 

 import {
  VKShareButton ,
  VKIcon ,
} from 'next-share'

< VKShareButton
  url = { 'https://github.com/next-share' }
  image = { './next-share.png' }
>
  < VKIcon size = { 32 } round />
</ VKShareButton >

VKShareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
imagem corda Um link absoluto para a imagem que será compartilhada.
Noparse booleano Se o TRUE for aprovado, a VK não recuperará informações de URL.
Novklinks booleano Se True for aprovado, não haverá links para o perfil do usuário na janela aberta. Apenas para dispositivos móveis.
largura de janela número 660 Largura da janela aberta.
WindowHesed número 460 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adeços de Vkicon

? Mailru

? ‍ Código 

 import {
  MailruShareButton ,
  MailruIcon ,
} from 'next-share'

< MailruShareButton
  url = { 'https://github.com/next-share' }
  title = { 'Next Share' }
>
  < MailruIcon size = { 32 } round />
</ MailruShareButton >

Aderetes MailRushareButton

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
descrição corda Descrição da página compartilhada.
imageurl corda URL da imagem da página compartilhada.
largura de janela número 660 Largura da janela aberta.
WindowHesed número 460 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Aderetes Mailruicon

? LiveJournal

? ‍ Código 

 import {
  LivejournalShareButton ,
  LivejournalIcon ,
} from 'next-share'

< LivejournalShareButton
  url = { 'https://github.com/next-share' }
  title = { 'Next Share' }
  description = { 'https://github.com/next-share' }
>
  < LivejournalIcon size = { 32 } round />
</ LivejournalShareButton >

LiveJournalShareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda O título da página compartilhada.
descrição corda Descrição da página compartilhada.
largura de janela número 660 Largura da janela aberta.
WindowHesed número 460 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adeços de LiveJournalicon

? Local de trabalho

? ‍ Código 

 import {
  WorkplaceShareButton ,
  WorkplaceIcon ,
} from 'next-share'

< WorkplaceShareButton
  url = { 'https://github.com/next-share' }
  quote = { 'Next Share' }
>
  < WorkplaceIcon size = { 32 } round />
</ WorkplaceShareButton >

WorkPlaceshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
citar corda
hashtag corda
largura de janela número 550 Largura da janela aberta.
WindowHesed número 400 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adeços de Workplaceicon

? Bolso

? ‍ Código 

 import {
  PocketShareButton ,
  PocketIcon ,
} from 'next-share'

< PocketShareButton
  url = { 'https://github.com/next-share' }
  title = { 'Next Share' }
>
  < PocketIcon size = { 32 } round />
</ PocketShareButton >

PocketshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda Título da página compartilhada. Observe que, se o Pocket detectar uma tag de título na página salva, esse parâmetro será ignorado e a etiqueta do título da página salva será usada.
largura de janela número 500 Largura da janela aberta.
WindowHesed número 500 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Pocketicon adereços

? Instapaper

? ‍ Código 

 import {
  InstapaperShareButton ,
  InstapaperIcon ,
} from 'next-share'

< InstapaperShareButton
  url = { 'https://github.com/next-share' }
  title = { 'Next Share' }
>
  < InstapaperIcon size = { 32 } round />
</ InstapaperShareButton >

InstapaperShareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda Título da página compartilhada.
descrição corda Descrição da página compartilhada.
largura de janela número 500 Largura da janela aberta.
WindowHesed número 500 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adereços instapapericon

? Hatena

? ‍ Código 

 import {
  HatenaShareButton ,
  HatenaIcon ,
} from 'next-share'

< HatenaShareButton
  url = { 'https://github.com/next-share' }
  title = { 'Next Share' }
>
  < HatenaIcon size = { 32 } round />
</ HatenaShareButton >

HatenashareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda Título da página compartilhada.
largura de janela número 660 Largura da janela aberta.
WindowHesed número 460 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adeços de Hatenaicon

? FacebookMessenger

? ‍ Código 

 import {
  FacebookMessengerShareButton ,
  FacebookMessengerIcon ,
} from 'next-share'

< FacebookMessengerShareButton
  url = { 'https://github.com/next-share' }
  appId = { '' }
>
  < FacebookMessengerIcon size = { 32 } round />
</ FacebookMessengerShareButton >

FacebookMessengerShareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
Appid corda ID do aplicativo do Facebook. ✅
Redirecture corda O URL para redirecionar depois de compartilhar (padrão: o URL compartilhado).
para corda Um ID de usuário de um destinatário. Quando a caixa de diálogo aparecer, o remetente pode especificar pessoas adicionais como destinatários.
largura de janela número 1000 Largura da janela aberta.
WindowHesed número 820 Altura da janela aberta.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

FacebookMessengericon adereços

? E-mail

? ‍ Código 

 import {
  EmailShareButton ,
  EmailIcon ,
} from 'next-share'

< EmailShareButton
  url = { 'https://github.com/next-share' }
  subject = { 'Next Share' }
  body = "body"
>
  < EmailIcon size = { 32 } round />
</ EmailShareButton >

EmailshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
assunto corda
corpo corda
separador corda
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Adeços de emailicon

? Gab

? ‍ Código 

 import {
  GabShareButton ,
  GabIcon ,
} from 'next-share'

< GabShareButton
  url = { 'https://github.com/next-share' }
  title = { 'Next Share' }
>
  < GabIcon size = { 32 } round />
</ GabShareButton >

GabshareButton adereços

Adereços Tipo Padrão Descrição Obrigatório
crianças nó Componente reagir, elemento html ou string. ✅
url corda O URL da página compartilhada. ✅
título corda Título da página compartilhada.
largura de janela número 660 Largura da janela aberta.
WindowHesed número 640 Altura da janela aberta.

Gabicon Props

Ícones adereços

Adereços Tipo Padrão Descrição Obrigatório
tamanho número Tamanho do ícone em pixels.
redondo booleano Mostre redondo ou retângulo.
fronteira número Defina os cantos arredondados se usar o ícone redondo.
Bgstyle objeto Personalize o estilo de fundo.
iconfillcolor corda white Personalize a cor do preenchimento do ícone.
BlankTarget booleano falso Abra a janela de compartilhamento em uma nova guia se definida como true .

Uso do ShareCount

? Facebook

? ‍ Código 

 import { FacebookShareCount } from 'next-share'

< FacebookShareCount
  url = { 'https://github.com/next-share' }
  appId = { '' }
  appSecret = { '' }
/>

< FacebookShareCount
  url = { 'https://github.com/next-share' }
  appId = { '' }
  appSecret = { '' }
>
  { shareCount => < span className = "wrapper" > { shareCount } </ span > }
</ FacebookShareCount >

FacebookshareCount adereços

Adereços Tipo Padrão Descrição Obrigatório
url corda O URL da página compartilhada. ✅
Appid corda ID do aplicativo do Facebook. ✅
AppSecret corda Aplicativo do Facebook segredo. ✅
crianças nó Componente reagir, elemento html ou string.

? Hatena

? ‍ Código 

 import { HatenaShareCount } from 'next-share'

< HatenaShareCount url = { 'https://github.com/next-share' } />

< HatenaShareCount url = { 'https://github.com/next-share' } >
  { shareCount => < span className = "wrapper" > { shareCount } </ span > }
</ HatenaShareCount >

HatenashareCount adereços

Adereços Tipo Padrão Descrição Obrigatório
url corda O URL da página compartilhada. ✅
crianças nó Componente reagir, elemento html ou string.

? OK

? ‍ Código 

 import { OKShareCount } from 'next-share'

< OKShareCount url = { 'https://github.com/next-share' } />

< OKShareCount url = { 'https://github.com/next-share' } >
  { shareCount => < span className = "wrapper" > { shareCount } </ span > }
</ OKShareCount >

OkshareCount adereços

Adereços Tipo Padrão Descrição Obrigatório
url corda O URL da página compartilhada. ✅
crianças nó Componente reagir, elemento html ou string.

? Pinterest

? ‍ Código 

 import { PinterestShareCount } from 'next-share'

< PinterestShareCount url = { 'https://github.com/next-share' } />

< PinterestShareCount url = { 'https://github.com/next-share' } >
  { shareCount => < span className = "wrapper" > { shareCount } </ span > }
</ PinterestShareCount >

PinterestshareCount adereços

Adereços Tipo Padrão Descrição Obrigatório
url corda O URL da página compartilhada. ✅
crianças nó Componente reagir, elemento html ou string.

? Tumblr

? ‍ Código 

 import { TumblrShareCount } from 'next-share'

< TumblrShareCount url = { 'https://github.com/next-share' } />

< TumblrShareCount url = { 'https://github.com/next-share' } >
  { shareCount => < span className = "wrapper" > { shareCount } </ span > }
</ TumblrShareCount >

TumblrshareCount adereços

Adereços Tipo Padrão Descrição Obrigatório
url corda O URL da página compartilhada. ✅
crianças nó Componente reagir, elemento html ou string.

? Vk

? ‍ Código 

 import { VKShareCount } from 'next-share'

< VKShareCount url = { 'https://github.com/next-share' } />

< VKShareCount url = { 'https://github.com/next-share' } >
  { shareCount => < span className = "wrapper" > { shareCount } </ span > }
</ VKShareCount >

VKSHARECOUNT APS

Adereços Tipo Padrão Descrição Obrigatório
url corda O URL da página compartilhada. ✅
crianças nó Componente reagir, elemento html ou string.

Uso do ícone

? ‍ Código 

 import {
  EmailIcon ,
  FacebookIcon ,
  FacebookMessengerIcon ,
  GithubIcon ,
  HatenaIcon ,
  InstagramIcon ,
  InstapaperIcon ,
  LineIcon ,
  LinkedinIcon ,
  LivejournalIcon ,
  MailruIcon ,
  OKIcon ,
  PinterestIcon ,
  PocketIcon ,
  RedditIcon ,
  SpotifyIcon ,
  TelegramIcon ,
  TumblrIcon ,
  TwitterIcon ,
  ViberIcon ,
  VKIcon ,
  WeiboIcon ,
  WhatsappIcon ,
  WorkplaceIcon ,
} from 'next-share'

Adereços

Adereços Tipo Padrão Descrição Obrigatório
tamanho número Tamanho do ícone em pixels.
redondo booleano Se deve mostrar ícones redondos ou retos.
fronteira número Permita cantos arredondados se usar ícones ret.
Bgstyle objeto Personalize o plano de fundo.
iconfillcolor corda white Personalize a cor do preenchimento do ícone.

Changelog

Versão mais recente 0.27.0 (2023-09-28):

  • Atualize o Twittericon

Os detalhes das alterações para cada versão estão documentados no Changelog.md.

? Embrulhar

Se você acha que algum dos next-share pode ser aprimorado, abra um PR com qualquer atualização e envie quaisquer problemas. Além disso, continuarei a melhorar isso, então você pode assistir/estrelar este repositório para revisitar.

? Contribuição

Gostaríamos muito de ter a sua ajuda sobre contribuições para next-share , comprando e enviando uma solicitação de tração!

Suas contribuições são bem -vindas, reconhecidas e apreciadas. (✿◠‿◠)

Como contribuir:

  • Open Pull Solicy com melhorias
  • Discuta idéias em questões
  • Espalhe a palavra
  • Estenda a mão com qualquer feedback

Colaboradores


Bunlong
Arturs Kirtovskis
Sean
Steve Scavo
Maddy Miller
Joe McBroom

Lena Kotlyar

?‍?‍? Anúncio

Você talvez esteja interessado.

  • Padrões de reação - Padrões e técnicas de reação a serem usadas no desenvolvimento para o React Developer.
  • React Papaparse-o analisador mais rápido no navegador CSV (ou texto delimitado) para reagir.
  • Próximo qrcode - ganchos do React para gerar código QR para seus próximos aplicativos React.
  • Na próxima vez atrás-um componente leve e minúsculo para seus próximos aplicativos React.

⚖️ Licença

A licença do MIT

Expandir
Informações adicionais
Aplicativos Relacionados
Recomendado para você
Informações Relacionadas Todos