Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

README

        

# โš›๏ธ React Essentials

ReactJS Typescript Tailwind CSS Storybook

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)