@neonjungle/headless

Headless

Making a release

Make sure you are on the main branch and have the latest!!

Update the version using npm.

npm version major|minor|patch

push that commit and the tags using

git push --tags

Gitlab will build and publish the package with the new version.

Apollo Client

To initialise in _app.tsx:

import { ApolloProvider } from "@apollo/client"
import { useApollo } from "@neonjungle/headless";

export default function App({ Component, pageProps }) {
  const apolloClient = useApollo(pageProps)

  return (
    <ApolloProvider client={apolloClient}>
      <Component {...pageProps} />
    </ApolloProvider>
  )
}

To initialise in index.tsx with getStaticProps():

import { initializeApollo, addApolloState } from "@neonjungle/headless";

export async function getStaticProps() {
  const apolloClient = initializeApollo()

  await apolloClient.query({
    query: QUERY,
    variables: VARIABLES,
  })

  return addApolloState(apolloClient, {
    props: {},
    revalidate: 1,
  })
}

TS Utils

import { keys, entries, fromEntries, values, assign, assert } from "@neonjungle/headless";

keys(object)
entries(object)
fromEntries(entries)
values(object)
assign(target, source)
assert(condition, message)

Hooks

import { useIsDesktop, useOutsideClickAndEsc, useScrolled } from "@neonjungle/headless";

useIsDesktop(1024)
const ref = useOutsideClickAndEsc(() => alert("You clicked outside!"));
useScrolled(100)

Next Auth

To initialise in [...nextauth].js:

import NextAuth from "next-auth";
import { authOptions } from "@neonjungle/headless";

const query = `mutation tokenAuth($email: String!, $password: String!) {
    tokenAuth(email: $email, password: $password) {
        success
        token
        errors
        refreshToken
        user {
            firstName
            lastName
            email
            organisation {
                title
            }
        }
    }
}`;

export default NextAuth(authOptions(query));

Note: query is optional and should only be used if additional user fields are required, 'organisation' is an additional field in this example.