@ux_bob/yv-iwc
Advanced tools
A React component for embedding YouVisit Interactive Web Component (IWC)
You can install the package using npm or pnpm:
npm install @ux_bob/yv-iwc
# or
pnpm add @ux_bob/yv-iwc
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'
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 App
// app/layout.tsx
import '@ux_bob/yv-iwc/dist/index.css'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
)
}
// pages/_app.tsx
import '@ux_bob/yv-iwc/dist/index.css'
export default function App({ Component, pageProps }) {
return <Component {...pageProps} />
}
// src/index.tsx or src/App.tsx
import '@ux_bob/yv-iwc/dist/index.css'
// src/main.tsx or src/App.tsx
import '@ux_bob/yv-iwc/dist/index.css'
| 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 |
The component comes with default styling that works out of the box. You can customize the appearance using the className props:
<YouVisitIWC
// ... other props
className="my-custom-container"
copyButtonClassName="my-custom-copy-button"
headingClassName="my-custom-heading"
/>
<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"
/>
/* 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);
}
This repository contains both the main package and a Next.js testing app to validate the package functionality.
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 build
TBD
This package uses Changesets for versioning and publishing. To release a new version:
Make your changes and commit them
Create a new changeset:
pnpm changeset
Follow the prompts to:
Commit the generated changeset file
Push your changes to the main branch
The GitHub Actions workflow will automatically:
FAQs
A React component for displaying YouVisit IWCs with syntax highlighting.
We found that @ux_bob/yv-iwc demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
GitHub account BufferZoneCorp published sleeper packages that later added credential theft, GitHub Actions tampering, fake go wrappers, and SSH persistence.
Research
/Security News
Socket found a malicious Intercom PHP package on Packagist using Composer plugin execution to steal credentials and spread across ecosystems.
Research
/Security News
Compromised intercom-client@7.0.4 npm package is tied to the ongoing Mini Shai-Hulud worm attack targeting developer and CI/CD secrets.