react-library-pxs

pxs with React

This is a step-by-step guide to use the pxs components in React.

Setup

First, install the package:

npm i react-library-pxs

Next, install the font-awesome package which is the icon package used by pxs:

npm install @fortawesome/fontawesome-free

Then load the component library and the CSS in your App.js:

import { defineCustomElements, pxsButton } from "react-library-pxs";
import "@fortawesome/fontawesome-free/css/all.min.css";
// ...

defineCustomElements();

You should now be able to use pxs components:

import React from 'react';
import { defineCustomElements, pxsButton } from "react-library-pxs";
import "@fortawesome/fontawesome-free/css/all.min.css";
// ...

defineCustomElements();


const App = () => (
  <div>
    <pxsButton
    button_color="default-primary"
    left_icon="fa-regular fa-face-smile"
    right_icon="fa-solid fa-arrow-right"
    custom_class=""
    mode="light"
    button_id="button"
    aria_label="button"
    onclick="console.log('clicked')"
    ><!---->Button</pxsButton>
  </div>
);

export default App;