@ux_bob/yv-iwc
v3.0.1
Published
A React component for displaying YouVisit IWCs with syntax highlighting.
Readme
@ux_bob/yv-iwc
A React component for embedding YouVisit Interactive Web Component (IWC)
Installation
You can install the package using npm or pnpm:
npm install @ux_bob/yv-iwc
# or
pnpm add @ux_bob/yv-iwcUsage
1. Import the CSS
First, import the CSS file in your app's root layout or main CSS file:
// In your layout.tsx, _app.tsx, or main.tsx
import '@ux_bob/yv-iwc/dist/index.css'2. Use the Component
import React from 'react'
import { YouVisitIWC } from '@ux_bob/yv-iwc'
const App = () => {
return (
<YouVisitIWC
containerWidth="100%"
containerHeight="400px"
title="Campus Tour"
institution="your-institution-id"
location="your-location-id"
showCode={true}
/>
)
}
export default AppFramework-Specific Setup
Next.js (App Router)
// app/layout.tsx
import '@ux_bob/yv-iwc/dist/index.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}Next.js (Pages Router)
// pages/_app.tsx
import '@ux_bob/yv-iwc/dist/index.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}Create React App
// src/index.tsx or src/App.tsx
import '@ux_bob/yv-iwc/dist/index.css'Vite
// src/main.tsx or src/App.tsx
import '@ux_bob/yv-iwc/dist/index.css'Props
| Prop | Type | Required | Description |
| ------------------------ | ------- | -------- | ----------------------------------------------------- |
| containerWidth | string | Yes | Width of the IWC container (e.g., "100%", "800px") |
| containerHeight | string | Yes | Height of the IWC container (e.g., "400px") |
| title | string | Yes | Title of the IWC experience |
| institution | string | Yes | Institution ID for the YouVisit experience |
| location | string | Yes | Location ID for the YouVisit experience |
| showCode | boolean | No | Whether to display the embed code (defaults to false) |
| className | string | No | Custom CSS class for the main container |
| codeContainerClassName | string | No | Custom CSS class for code snippet containers |
| copyButtonClassName | string | No | Custom CSS class for copy-to-clipboard buttons |
| headingClassName | string | No | Custom CSS class for section headings |
Styling and Customization
The component comes with default styling that works out of the box. You can customize the appearance using the className props:
Basic Customization
<YouVisitIWC
// ... other props
className="my-custom-container"
copyButtonClassName="my-custom-copy-button"
headingClassName="my-custom-heading"
/>CSS Framework Integration (Tailwind CSS)
<YouVisitIWC
// ... other props
className="max-w-4xl mx-auto bg-white rounded-lg shadow-lg"
copyButtonClassName="bg-blue-500 hover:bg-blue-600 text-white font-semibold"
headingClassName="text-2xl font-bold text-blue-600 border-b-2 border-blue-200"
/>Custom CSS Classes
/* Your custom CSS */
.my-custom-copy-button {
background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
border: none;
border-radius: 8px;
color: white;
font-weight: 600;
padding: 12px 20px;
}
.my-custom-copy-button:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}Development
This repository contains both the main package and a Next.js testing app to validate the package functionality.
Package Development
See Development.md file for instructions and deployment.md for deployment steps.
# Install dependencies
pnpm install
# Run development build with watch mode
pnpm run dev
# Build the package
pnpm run buildTesting App
TBD
Deployment
This package uses Changesets for versioning and publishing. To release a new version:
Make your changes and commit them
Create a new changeset:
pnpm changesetFollow the prompts to:
- Select the type of change (patch, minor, or major)
- Provide a description of the changes
- Confirm your choices
Commit the generated changeset file
Push your changes to the main branch
The GitHub Actions workflow will automatically:
- Create a Release PR if there are any changesets to process
- When the PR is merged, it will:
- Update the package version
- Generate/update the changelog
- Publish to npm