@pickguru/headless NPM

@pickguru/headless

Overview

PickGuru Headless is a solution that combines the power of PickGuru's free-to-play gaming solution with the convenience and versatility of npm headless widgets. This integration allows developers to seamlessly integrate PickGuru's gaming experience into their web applications, providing their users with an engaging and interactive gaming platform. PickGuru Headless leverages the npm ecosystem, which is a package manager for JavaScript, to deliver headless widgets that enable developers to embed PickGuru's gaming solution effortlessly. By integrating the PickGuru gaming experience via headless widgets, developers can provide their users with a rich and immersive gaming environment without the need for extensive backend development.

Setup

First to install the package run: pnpm i @pickguru/headless

import the Headless component into your App and pass to it a config options object:

// App.tsx
import { Headless } from '@pickguru/headless'

const token = USER_TOKEN
const url = GRAPHQL_ENDPOINT
const shareLink = APP_URL

const config = {
  token,
  url,
  shareLink
}

const App = () => (
  <div>
    <Headless config={config} />
  </div>
)

below, the config options type:

type ConfigOptions = {
  /* user token */
  token: string

  /* gateway endpoint */
  url: string

  /* url of this app */
  shareLink: string

  /* google analytics id */
  /* DEFAULT: '' */
  gaId?: string

  /* minileagues allowed */
  /* DEFAULT: false */
  isMinileaguesAllowed?: boolean
}

Then add the css import at the top and the variables to the css file to change the style of the headless app:

@import url('@pickguru/headless/style.css');

.pg-theme {
  --pg-bg-primary: 0 46 82;
  --pg-bg-secondary: 54 150 255;
  --pg-bg-light: 215 220 227;
  --pg-bg-dark: 169 178 189;
  --pg-bg-circle-won: 22 163 73;
  --pg-bg-circle-default: 255 255 255;
  --pg-bg-circle-lost: 255 255 255;
  --pg-text-circle-won: 255 255 255;
  --pg-text-circle-default: 169 178 189;
  --pg-text-circle-lost: 22 163 73;
  --pg-border-circle-won: 22 163 73;
  --pg-border-circle-default: 169 178 189;
  --pg-border-circle-lost: 22 163 73;
  --pg-text-heading: 0 46 82;
  --pg-text-default: 0 46 82;
  --pg-text-secondary: 54 150 255;
  --pg-text-tertiary: 255 255 255;
  --pg-text-light: 203 208 214;
  --pg-text-dark: 169 178 189;
  --pg-text-message-success: 42 193 57;
  --pg-text-message-warning: 252 191 0;
  --pg-text-promo: 255 255 255;
  --pg-bg-card: 255 255 255;
  --pg-bg-card-disabled: 255 255 255;
  --pg-bg-card-content: 237 240 243;
  --pg-border-primary: 0 46 82;
  --pg-border-secondary: 54 150 255;
  --pg-border-light: 215 220 227;
  --pg-border-dark: 169 178 189;
  --pg-bg-button-disabled: 238 238 238;
  --pg-text-button-disabled: 204 204 204;
  --pg-bg-button-primary: 54 150 255;
  --pg-text-button-primary: 255 255 255;
  --pg-bg-button-secondary: 54 150 255;
  --pg-text-button-secondary: 255 255 255;
  --pg-bg-button-tertiary: 237 240 243;
  --pg-text-button-tertiary: 169 178 189;
  --pg-text-button-outlined: 54 150 255;
  --pg-border-button-outlined: 54 150 255;
  --pg-text-button-live: 230 22 41;
  --pg-border-button-live: 230 22 41;
  --pg-text-button-finished: 169 178 189;
  --pg-border-button-finished: 169 178 189;
  --pg-bg-tabs: 255 255 255;
  --pg-bg-tab-default: 255 255 255;
  --pg-text-tab-default: 169 178 189;
  --pg-bg-tab-active: 54 150 255;
  --pg-text-tab-active: 255 255 255;
  --pg-text-tab-filter: 0 46 82;
  --pg-facebook: 59 89 152;
  --pg-twitter: 0 172 238;
  --pg-whatsapp: 37 211 102;
  --pg-share: 54 150 255;
  --pg-fantasy: 230 22 41;
  --pg-predictor: 54 150 255;
  --pg-error: 230 22 41;
}

Finally, add the class to the headless app container

// App.tsx
import { Headless } from '@pickguru/headless'

const token = { USER_TOKEN }
const url = { GRAPHQL_ENDPOINT }
const shareLink = { THIS_APP_HOSTED_URL }

const config = {
  token,
  url,
  shareLink
}

const App = () => (
  <div className="pg-theme">
    <Headless config={config} />
  </div>
)

optionally you can pass a custom back button:

// App.tsx
import { Headless } from '@pickguru/headless'

const token = { USER_TOKEN }
const url = { GRAPHQL_ENDPOINT }
const shareLink = { THIS_APP_HOSTED_URL }

const config = {
  token,
  url,
  shareLink
}

const App = () => (
  <div className="pg-theme">
    <Headless
      config={config}
      backButton={
        <button className="font-semibold px-4 py-2 rounded-full text-xs uppercase bg-[#3696ff] ml-2 md:ml-0 text-white">
          Back
        </button>
      }
    />
  </div>
)

@pickguru/config @pickguru/pages react react-dom

@everything-registry/sub-chunk-717

2 days ago

2 days ago

8 days ago

8 days ago

7 days ago

7 days ago

16 days ago

17 days ago

17 days ago

18 days ago

18 days ago

21 days ago

22 days ago

22 days ago

23 days ago

25 days ago

25 days ago

25 days ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

1 month ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

2 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

3 months ago

4 months ago

3 months ago

4 months ago

3 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

4 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

5 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

6 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

7 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago