Simplygrow-ui NPM

SimplyGrow UI

A library of React components, hooks and utility functions built with TypeScript and CSS Modules.

Usage

Install package

npm install simplygrow-ui

Global CSS

In your root component/layout, paste the following code:

import 'simplygrow-ui/dist/esm/index.css';

UIProvider component

In your root component/layout, import the <UIProvider /> component and wrap your React children (as well as any other React context providers involving UI). This allows you to select the SimplyGrow app you are using, which will update the colours of all components.

Next.js

import { UIProvider } from 'simplygrow-ui';

interface RootLayoutProps {
  children: ReactNode
}

const RootLayout: FC<RootLayoutProps> = ({ children }) => {
  return (
    <html lang="en">
      <body>
        <UIProvider appTheme={'skillbook'}>
          <main>{children}</main>
        </UIProvider>
      </body>
    </html>
  )
}

export default RootLayout

Create React App

import { UIProvider } from 'simplygrow-ui';

function App({ children }) {
  return (
    <UIProvider appTheme={'peopleflow'}>
      {children}
    </UIProvider>
  );
}

export default App

Components

ActionButton
LinkButton
FileInputButton
CheckboxInput
FlexContainer
FormContainer
GridContainer
Header
Heading
Input
LinkText
LoadingSpinner
Modal
OTPInput
Paragraph
Select
UnorderedList
Code

Developing

To contribute to simplygrow-ui, following these steps:

Ensure you have Node v20.14.0 installed. If you use nvm, run the following command to use the version of Node stipulated in nvmrc.

nvm use

Install the project dependencies.

npm install

In order to test out the components in a realistic React context while developing, use the simple React app bundled with Rollup. Import any components into src/app.js to test them out. To run the React app, run the following terminal commands in two terminal instances at the same time: