Skip to content
Solid APG

Getting started

solid-ppg is a collection of functions (referred to as primitives or builders) developed for the Solid.js library. It encompasses the logic for crafting accessible UI components while adhering to the WAI-ARIA standard and APG design patterns.

Installation

Make sure you have Node.js >=18 installed on your machine, along with a package manager of your choice. This library is supported by Solid.js >=1.8.

  1. Install the package using your package manager of choice.

    Terminal window
    npm install solid-apg

  2. Import the primitives you want.

    Most of the components is exported in the form of a subpackage. For example, to import and use the Disclosure component, you would do the following:

    import { createDisclosure } from "solid-apg/disclosure";

    Alternatively, you can import the entire library and use the components directly:

    import { createDisclosure } from "solid-apg";

  3. Use the primitive to create your desired component.

    import { createDisclosure } from "solid-apg/disclosure";
    

    const App = () => {
        const { props } = createDisclosure();
        return (
            <div {...props}>....</div>
        )
    };