https://github.com/leanstacks/react-common
A library of common, reusable React components for the LeanStacks organization.
https://github.com/leanstacks/react-common
react tailwindcss typescript
Last synced: about 1 month ago
JSON representation
A library of common, reusable React components for the LeanStacks organization.
- Host: GitHub
- URL: https://github.com/leanstacks/react-common
- Owner: leanstacks
- License: mit
- Created: 2023-09-02T21:41:32.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-01-22T11:50:01.000Z (over 2 years ago)
- Last Synced: 2024-04-24T16:38:06.054Z (about 2 years ago)
- Topics: react, tailwindcss, typescript
- Language: TypeScript
- Homepage:
- Size: 425 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# @leanstacks/react-common
A suite of common React components used to compose React applications for the LeanStacks organization.
## Requirements
This library requires the following
- Node [LTS](https://github.com/nodejs/Release) 18 or higher
- React 18.x
- TailwindCSS 3.x
## Install
To install this library, issue the following command in your react project
```shell
npm install @leanstacks/react-common
```
### Configure Tailwind
LeanStacks components are styled with [TailwindCSS](https://tailwindcss.com/). You must include this library in your project's Tailwind configuration so that Tailwind styles are applied to the components from this library.
In your project, create or open your `tailwind.config.js` file. Ensure that LeanStacks library paths are included by adding `'./node_modules/@leanstacks/**/*.{js,jsx,ts,tsx}'` to the `content` section.
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{js,jsx,ts,tsx}', './node_modules/@leanstacks/**/*.{js,jsx,ts,tsx}'],
darkMode: 'class',
theme: {
extend: {},
},
plugins: [],
};
```
See the [Tailwind installation guide](https://tailwindcss.com/docs/installation) for more details about this configuration file.
## Use
To use React components from the library in your React application, simply import the desired component(s) and use them as you would any React component.
```typescript
import { Text, TextVariant } from '@leanstacks/react-common';
const MyComponent: React.FC = () => {
return (
Welcome to React!
);
};
```
## Editor
To prevent warnings from Tailwind CSS rules, install a plugin like the [Tailwind CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) plugin for Visual Studio Code.
If you are using Prettier, you may also install the [Prettier plugin for Tailwind](https://github.com/tailwindlabs/prettier-plugin-tailwindcss) that will automatically sort Tailwind classes in the recommended order.
## License
[MIT License](./LICENSE)