simplygrow-ui
v0.8.29
Published
A library of React components, hooks and utility functions built with TypeScript and CSS Modules.
Maintainers
scholtz.gnomeReadme
SimplyGrow UI
A library of React components, hooks and utility functions built with TypeScript and CSS Modules.
Usage
Install package
npm install simplygrow-uiGlobal 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 RootLayoutCreate React App
import { UIProvider } from 'simplygrow-ui';
function App({ children }) {
return (
<UIProvider appTheme={'peopleflow'}>
{children}
</UIProvider>
);
}
export default AppComponents
- 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 useInstall the project dependencies.
npm installIn 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:
npm run build:watchThis will bundle your code with Rollup and re-run the bundle on file changes.
npm run devThis will spin up a simple server accessed at localhost:3000 to host the file in public/index.html.