@halo-media/ts-timed-ticketing-widget
Advanced tools
1. [Getting Started](#getting-started) 2. [Working on this library](#working-on-this-library)
We need to define where the widget is going to be rendered. In your page, add a div element where you want to render the app. Make sure the element has the id attribute set.
<div id="timed-ticketing-container"></div>
We need to import the script and the base stylesheet. To do this, under the <head> tag in your page add the following code:
<link href="https://unpkg.com/@halo-media/ts-timed-ticketing-widget@latest/dist/style.css" rel="stylesheet" />
<script src="https://unpkg.com/@halo-media/ts-timed-ticketing-widget@latest/dist/index.umd.js"></script>
Finally, we can configure and render the app. Add the following script right before the end of the body of your page
<script type="module">
const Checkout = window['ts-timed-ticketing-widget'];
const rootElement = document.getElementById(
'timed-ticketing-container', // Make sure this value matches the `id` of the div element created in the first step
);
if (rootElement && config) {
// Here goes your config
Checkout.render({
element: rootElement,
endpoint: '',
clientId: '',
siteId: '',
eventSlug: '',
square: {
appId: '',
locationId: '',
},
});
}
</script>
You can test if you config works by trying to load it in the demo site here
Make sure you have Node.js v16 and NPM v8 or above installed on your machine. The project uses ViteJS to generate the bundle and for the development server.
To start the development server: npm run start:dev
To run test suite: npm run test
To build: npm run build
After cloning this repo, you need to link the library
Inside this repository, run npm run build to make sure you are using the latest changes and then npm link
Go to the project where you want to use this library, and run npm link @halo-media/ts-timed-ticketing-widget
Build while listening for changes with: npm run build:watch
Thats all.
Q: Why is React and ReactDOM marked as devDependencies in package.json?
A: This package is meant to be used as a library to build Checkouts. For that reason we use Vite's "library" mode which does not bundle React and ReactDOM. We still need them as npm dependency for development so we can avoid working exclusively with npm link.
FAQs
1. [Getting Started](#getting-started) 2. [Working on this library](#working-on-this-library)
The npm package @halo-media/ts-timed-ticketing-widget receives a total of 489 weekly downloads. As such, @halo-media/ts-timed-ticketing-widget popularity was classified as not popular.
We found that @halo-media/ts-timed-ticketing-widget demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers 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.
Security News
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.