https://github.com/emmveqz/react-components
Diverse Components for React
https://github.com/emmveqz/react-components
async-hooks asynchooks auto-trim auto-trimmed-list components file-component file-field filecomponent filefield react react-components reactjs trimmed-list ui-component ui-components useasync useasynceffect usecontext useeffect-async useeffectasync
Last synced: about 2 months ago
JSON representation
Diverse Components for React
- Host: GitHub
- URL: https://github.com/emmveqz/react-components
- Owner: emmveqz
- Created: 2024-08-17T10:24:30.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-06-12T17:01:16.000Z (about 1 year ago)
- Last Synced: 2025-09-21T16:10:24.487Z (9 months ago)
- Topics: async-hooks, asynchooks, auto-trim, auto-trimmed-list, components, file-component, file-field, filecomponent, filefield, react, react-components, reactjs, trimmed-list, ui-component, ui-components, useasync, useasynceffect, usecontext, useeffect-async, useeffectasync
- Language: TypeScript
- Homepage:
- Size: 932 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Components
Diverse UI Components using React Hooks, [Material UI](https://mui.com/material-ui/), and [emotion](https://emotion.sh/docs/introduction).
### Instructions
npm package: [@emmveqz/react-components](https://www.npmjs.com/package/@emmveqz/react-components)
- Just install the npm package, using:
`npm install @emmveqz/react-components`
### Auto Trimmed List
Pass a list of strings so it's trimmed to fit inside a component,
adding a "rest" badge at the end.
### File Field
A File field using Material UI.
Use the "Download" icon whenever your field has data,
and the "Select File" icon to set/change the file.
### [useAsyncEffect hook](./src/hooks/useAsyncEffect/README.md)
Use React's `useEffect` hook asynchronously (safely).
### [AppContext](./src/components/AppContext/README.md)
A Context Provider that can be consumed with a `useAppContext()` hook, updating its props (thus re-rendering) independently.
Check out the [example](./src/components/AppContext/example/index.tsx)
### [useExternalScript hook](./src/hooks/useExternalScript/)
Load an external script asynchronously, and safely wait for its readiness state.