Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pooltogether/pooltogether-react-components
React UI components for PoolTogether.
https://github.com/pooltogether/pooltogether-react-components
Last synced: about 2 months ago
JSON representation
React UI components for PoolTogether.
- Host: GitHub
- URL: https://github.com/pooltogether/pooltogether-react-components
- Owner: pooltogether
- License: mit
- Created: 2021-01-22T02:36:22.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-18T20:49:38.000Z (almost 2 years ago)
- Last Synced: 2024-10-14T09:05:37.024Z (3 months ago)
- Language: TypeScript
- Homepage:
- Size: 37 MB
- Stars: 3
- Watchers: 3
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# PoolTogether React Tailwind UI Components
React UI components using **tailwindcss**
## Components:
Component Groups
- [Buttons](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Buttons)
- [Containers](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Containers)
- [Icons](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Icons)
- [Input](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Input)
- [Layout](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Layout)
- [Links](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Links)
- [Loading](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Loading)
- [Modal](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Modal)
- [Navigation](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/Navigation)
- [PageHeader](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/PageHeader)
Top level components
- [PageTitleAndBreadcrumbs](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/PageTitleAndBreadcrumbs.jsx)
- [PoolCurrencyIcon](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/PoolCurrencyIcon.jsx)
- [ThemeContextProvider](https://github.com/pooltogether/pooltogether-react-components/tree/main/src/components/ThemeContextProvider.jsx)
## Installation:
`yarn add @pooltogether/pooltogether-react-components`
## Usage
Required:
```js
// tailwind.config.js
const pooltogetherTheme = require("@pooltogether/pooltogether-react-components");
module.exports = pooltogetherTheme({
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
});
```
Wrap your app in `ThemeContextProvider`
```js
// _app.jsx
import { ThemeContextProvider } from '@pooltogether/react-components'
import '@pooltogether/react-components/dist/globals.css'
```
Now you can use any components you want:
```js
import React from "react";
import { Button } from "@pooltogether/pooltogether-react-components";
Submit;
// -------------------
import React from "react";
import Link from "next/link";
import { ButtonLink } from "@pooltogether/pooltogether-react-components";
// External links
View
// Internal links
Home
```
## Local development (yalc)
In `pooltogether-react-components`:
`yarn`
`yalc publish`
In the app you're importing `pooltogether-react-components`:
`yalc add @pooltogether/react-components`
## Local development (yarn)
TODO: Make this better...
In `pooltogether-react-components`:
`yarn`
`yarn link`
In the app you're importing `pooltogether-react-components`:
`yarn link-components`
In `pooltogether-react-components`:
`yarn link-local`
`yarn start`
In the app you're importing `pooltogether-react-components`:
`yarn dev`
And your app will hot reload when changes are detected in the components folder!
## Testing
- `yarn test` will run jest
# TODO:
- integrate prettier/husky with our default prettier config
- copy unit tests over and get them running in this lib