Skip to content

Latest commit

 

History

History
131 lines (90 loc) · 2.89 KB

README.md

File metadata and controls

131 lines (90 loc) · 2.89 KB
Raw

React Addons Components

BackToTop

Adds a hidden back-to-top link for accessibility purposes.

Usage

<BackToTop />

Should be combined with the following sass

.back-to-top
  display: none

  &:focus-within
    display: block

Button

Creates a button. Determines whether to use an <a>, <Link> or <button> element depending on the props passed.

Usage

<Button href={'https://superrb.com'} label={'The visible label'} label_a11y={'A separate label for screenreaders'} />

ContextWrapper

A wrapper component containing providers for all contexts within addons.

Usage

<ContextWrapper>
  <Layout />
</ContextWrapper>

CookieBanner

A cookie banner container user-customisable options for tracking.

Usage

<CookieBanner
  allowCustomisation={false} {/* Whether to allow users to reject tracking cookies individually */}
  allowReject={true}         {/* Whether to include a reject button. Automatically false if allowCustomisation=true */}
  text="We use cookies to provide and improve our services. Sadly, not the delicious kind. Are you okay with that?"
  policyLabel="Curious about cookies?"
/>

Form

Creates a form, with field structure defined by a Yup schema. See full documentation

Usage

import { Form } from '@superrb/gatsby-addons/components'
import * as yup from 'yup'

const OPTIONS = [
  'Option 1',
  'Option 2'
]

const schema = yup.object({
  name: yup.string().required(),
  select: yup.string().oneOf(OPTIONS).required(),            // The `oneOf` validation rule will automatically trigger a select box
  message: yup.string().meta({ textarea: true }).required() // Set `textarea: true` in the fields metadata to display a textarea
})

const Page = () => (
  <Form action="https://yoursite.com/send" schema={schema} />
)

Menu Toggle

Renders a button which is automatically set up to toggle the navOpen property of NavContext

Usage

<MenuToggle />

Modal

A reusable modal component.

Usage

<Modal
  name="newsletter"   {/* The name used to refer to this modal when using the ModalContext or useModal hook */}
  openAfter={5000}    {/* If set, the modal will automatically open after the number of ms */}
  dismissable={true}  {/* If false, the modal will not include a close button and cannot be dismissed.
                          Use the [`useModal`](../hooks/README.md#useModal) hook to close the modal */}
>
  {children}
</Modal>

SkipTo

Adds hidden skip-to links for accessibility.

Usage

<SkipTo />

Should be combined with the following sass

.skip-to
  display: none

  &:focus-within
    display: block