https://github.com/zjefersound/react-essentials
This project shows some of my best public resources for creating react interfaces. You'll find components and services for your projects
https://github.com/zjefersound/react-essentials
components declarative-ui guide library project radix radix-ui react react-essentials reactjs starter storybook tailwind tailwindcss typescript
Last synced: 3 months ago
JSON representation
This project shows some of my best public resources for creating react interfaces. You'll find components and services for your projects
- Host: GitHub
- URL: https://github.com/zjefersound/react-essentials
- Owner: zjefersound
- Created: 2024-07-11T19:16:32.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-16T23:26:31.000Z (9 months ago)
- Last Synced: 2025-04-11T20:04:30.845Z (3 months ago)
- Topics: components, declarative-ui, guide, library, project, radix, radix-ui, react, react-essentials, reactjs, starter, storybook, tailwind, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://react-essentials-opal.vercel.app
- Size: 1.36 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ⚛️ React Essentials
![]()
![]()
![]()
To create good React projects you must have good components and reusable code. You may find thousands of examples online, but what if you could get the most important features in one place?
## 🎯 Principles
This project aims to be an open-source guide for new projects. It's open for collaborators to request fixes and give ideas. The code contains hooks, components, and helper functions for your React project.
## 🧰 Components
There are plenty of components available in the Storybook Documentation, take a look!
[🔗 React Essentials Storybook](https://react-essentials-opal.vercel.app/)
### Recommended folder structure:
```
📂src
...
📂components
(your components...)
📂form // recommended, but not required
📂ui // recommended, but not required
```## ⚓ Hooks
- useForm (coming soon :] )
### Recommended folder structure:
```
📂src
...
📂hooks
(your hooks...)
```## 🔧 Helpers
Common helper functions (a.k.a. utils) that will be used throughout the application. For example formatting, conversions, etc.
### Recommended folder structure:
```
📂src
...
📂utils
(your helpers...)
```## 📖 Types
Some components depend on global types
### Recommended folder structure:
```
📂src
...
📂models
(react-essentials required types...)
```## 📚 Important Docs:
- [Dialog](/docs/Dialog.md)
- [File Input](/docs/FileInput.md)
- [Smart Field](/docs/SmartField.md)
- [Smart Form](/docs/SmartForm.md)
- [Toast](/docs/Toast.md)
- [useForm](/docs/useForm.md)
- [useSmartForm](/docs/useSmartForm.md)