Web Components
A shareable web components library that provides typed web components that can be used with plain HTML or within any major frameworks, such as React, Angular, Vue or Svelte.
Installation
You can install the package with:
bash
npm install @sesamy/sesamy-componentsor
bash
yarn add @sesamy/sesamy-componentsAvailable Components
The library provides the following web components:
- sesamy-login - Authentication component with login button and user menu
- sesamy-content-container - Controls access to content based on authentication and entitlements
- sesamy-paywall - Displays a paywall for content with different templates
- sesamy-visibility - Conditionally renders content based on authentication status
Basic Usage
All components are web components that can be used in plain HTML:
html
<!DOCTYPE html>
<html>
<head>
<script
type="module"
src="node_modules/@sesamy/sesamy-components/dist/lib/sesamy-components.js"
></script>
</head>
<body>
<sesamy-login></sesamy-login>
</body>
</html>Framework Integration
These web components are compatible with all major frameworks:
- React - Use components directly in JSX
- Angular - Include in templates with
CUSTOM_ELEMENTS_SCHEMA - Vue - Use components in templates
- Svelte - Import and use in Svelte components
See custom-elements-everywhere.com for detailed framework compatibility.
Design Tokens
Components support CSS custom properties (design tokens) for styling customization. Each component documents its available design tokens on its respective page.