# Biit Artist Web Component
The **Biit Artist Web Component** is a Stencil-built web component that displays artist information and upcoming events. It does not fetch data itself but requires you to provide the artist and event data fetched from the Bandsintown API.
## Installation
You can install the package via npm:
```sh
npm i bandisintown-web-component
```
Or include the component’s script via the CDN in your HTML file:
```html
```
## Usage
You can use `` in any modern framework or directly in HTML. Below are examples for different environments.
### Fetching Data
You will need to fetch artist and event data from the Bandsintown API before passing it to the component:
- **Artist Info:**
```
https://rest.bandsintown.com/artists/{{artist_name}}/?app_id=yOUrSuP3r3ven7aPp-id
```
- **Events:**
```
https://rest.bandsintown.com/artists/{{artist_name}}/events/?app_id=yOUrSuP3r3ven7aPp-id
```
### Basic HTML Usage
```html
Biit Artist Demo
```
### React Usage
```jsx
import React, { useEffect, useRef } from 'react';
import 'bandisintown-web-component';
function BiitArtistComponent() {
const artistRef = useRef(null);
const artistName = 'Coldplay';
const appId = 'yOUrSuP3r3ven7aPp-id';
useEffect(() => {
Promise.all([
fetch(`https://rest.bandsintown.com/artists/${artistName}/?app_id=${appId}`).then(res => res.json()),
fetch(`https://rest.bandsintown.com/artists/${artistName}/events/?app_id=${appId}`).then(res => res.json())
]).then(([artist, events]) => {
if (artistRef.current) {
artistRef.current.artist = artist;
artistRef.current.events = events;
}
});
}, []);
return ;
}
export default BiitArtistComponent;
```
### Vue Usage
```vue
```
### Svelte Usage
```svelte
```
## Properties
The `` component supports the following properties:
| Property | Type | Description |
|----------------------|---------|-------------|
| `artist` | object | Artist information fetched from the Bandsintown API. |
| `events` | array | List of upcoming events. |
| `backgroundColor` | string | Background color of the component. |
| `textColor` | string | Primary text color. |
| `textHoverColor` | string | Text color on hover. |
| `fontFamily` | string | Font family for text. |
| `buttonBgColor` | string | Background color for buttons. |
| `buttonTextColor` | string | Text color for buttons. |
| `buttonBgHoverColor` | string | Background color for buttons on hover. |
## Repository
View the source code and contribute at: [GitHub Repository](https://github.com/allensulzen/bandisintown-web-component)
## License
This project is open-source under the [MIT License](LICENSE).