# sakerhetspolisen/react-share-on-social architecture

> Architecture diagram of the GitHub repository sakerhetspolisen/react-share-on-social, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/sakerhetspolisen/react-share-on-social
- Repository: https://github.com/sakerhetspolisen/react-share-on-social

## Overview

This is a small React sharing component: a user activates its child element, the component uses the native Web Share API when available, and otherwise opens a portal-rendered fallback with social-sharing and copy-link actions. The main entry point and selected component implementations are sampled; Portal and Close are present in the tree but their source was not sampled, so their internal behavior is not expanded.

Main entry points: [`src/index.tsx`](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/index.tsx) (ShareOnSocial), [`src/components/Popup.tsx`](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Popup.tsx) (Fallback popup), [`src/components/SocialButton.tsx`](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/SocialButton.tsx) (Social button), [`src/components/Backdrop.tsx`](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Backdrop.tsx) (Backdrop)

## Diagram (Mermaid)

```mermaid
flowchart TD

node_user(("User"))
node_share["ShareOnSocial<br/>[index.tsx]"]
node_disclosure["Disclosure state<br/>[use-disclosure.tsx]"]
node_webshare["Web Share API"]
node_portal["Portal<br/>[Portal.tsx]"]
node_backdrop["Backdrop<br/>[Backdrop.tsx]"]
node_popup["Fallback popup<br/>[Popup.tsx]"]
node_header["Link preview<br/>[Header.tsx]"]
node_socialbutton["Social button<br/>[SocialButton.tsx]"]
node_socialconfig["Social definitions<br/>[socials.tsx]"]
node_clipboard["Copy link"]
node_copydep["Clipboard package"]
node_socialservices["Social services"]
node_close["Close button<br/>[Close.tsx]"]

node_user -->|"clicks trigger"| node_share
node_share -.->|"calls if supported"| node_webshare
node_share -->|"opens or closes"| node_disclosure
node_share -->|"renders fallback"| node_portal
node_share -->|"renders overlay"| node_backdrop
node_share -->|"renders dialog"| node_popup
node_backdrop -->|"calls close handler"| node_share
node_popup -->|"renders preview"| node_header
node_popup -->|"renders channels"| node_socialbutton
node_popup -->|"renders copy action"| node_clipboard
node_popup -->|"renders close action"| node_close
node_socialbutton -->|"reads channel URL"| node_socialconfig
node_socialbutton -->|"opens share URL"| node_socialservices
node_socialbutton -->|"calls click and close callbacks"| node_share
node_clipboard -->|"copies link"| node_copydep

click node_share "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/index.tsx"
click node_disclosure "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/hooks/use-disclosure.tsx"
click node_portal "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Portal.tsx"
click node_backdrop "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Backdrop.tsx"
click node_popup "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Popup.tsx"
click node_header "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Header.tsx"
click node_socialbutton "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/SocialButton.tsx"
click node_socialconfig "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/config/socials.tsx"
click node_clipboard "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/CopyToClipboard.tsx"
click node_close "https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Close.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_user,node_header toneBlue
class node_share,node_disclosure,node_portal,node_backdrop,node_popup,node_socialbutton,node_socialconfig,node_clipboard,node_close toneTeal
class node_webshare toneMint
class node_copydep,node_socialservices toneIndigo
```

## Components

### Other components

- **User**
- [ShareOnSocial](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/index.tsx): `src/index.tsx`
- [Disclosure state](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/hooks/use-disclosure.tsx): `src/hooks/use-disclosure.tsx`
- **Web Share API**
- [Portal](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Portal.tsx): `src/components/Portal.tsx`
- [Backdrop](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Backdrop.tsx): `src/components/Backdrop.tsx`
- [Fallback popup](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Popup.tsx): `src/components/Popup.tsx`
- [Link preview](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Header.tsx): `src/components/Header.tsx`
- [Social button](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/SocialButton.tsx): `src/components/SocialButton.tsx`
- [Social definitions](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/config/socials.tsx): `src/config/socials.tsx`
- [Copy link](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/CopyToClipboard.tsx): `src/components/CopyToClipboard.tsx`
- **Clipboard package**
- **Social services**
- [Close button](https://github.com/sakerhetspolisen/react-share-on-social/blob/master/src/components/Close.tsx): `src/components/Close.tsx`

## Connections

- User → ShareOnSocial: clicks trigger
- ShareOnSocial → Web Share API: calls if supported
- ShareOnSocial → Disclosure state: opens or closes
- ShareOnSocial → Portal: renders fallback
- ShareOnSocial → Backdrop: renders overlay
- ShareOnSocial → Fallback popup: renders dialog
- Backdrop → ShareOnSocial: calls close handler
- Fallback popup → Link preview: renders preview
- Fallback popup → Social button: renders channels
- Fallback popup → Copy link: renders copy action
- Fallback popup → Close button: renders close action
- Social button → Social definitions: reads channel URL
- Social button → Social services: opens share URL
- Social button → ShareOnSocial: calls click and close callbacks
- Copy link → Clipboard package: copies link