@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 this package, the base stylesheet and the react scripts. To do this, under the <head> tag in your page add the following code:
<script crossorigin src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@halo-media/ts-timed-ticketing-widget@latest/dist/index.umd.js"></script>
<link href="https://unpkg.com/@halo-media/ts-timed-ticketing-widget@latest/dist/style.css" rel="stylesheet" />
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,
baseUrl: '',
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.
Q: What does the api folder store?
A: api contains all the API clients that are being used in the project and that we are likely to use in other projects.
These API clients should be ready to extract into a its own repository anytime.
Q: What can be considered a service?
A: Services are the bridge the closes any communication gap between the app components and external systems like REST APIs. For example, timed-ticketing.service is a service that enables the app to communicate with TicketSocket's Timed Ticketing API.
Q: Whats the difference between components and containers?
A: The concept of components and containers comes from an old redux convention.Components inside the components folder are made for maximum reusability and fully unaware of the context where they are being used. In the other hand, components in the containers folder can connect to the redux store.
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 200 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
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.