reactchemy

🟣 The perfect fusion of React Hooks, Components and reusable Utils to optimize your project.

pnpm add reactchemy

_{Created by Dennis ollhoff 💚}

📖 Summary

🎣 Hooks

• useBoolean()
• useBoop()
• useClickAnyWhere()
• useCopyToClipboard()
• useCountdown()
• useCounter()
• useDarkMode()
• useDebounce()
• useDocumentTitle()
• useEffectOnce()
• useElementSize()
• useEventListener()
• useFetch()
• useHasMounted()
• useHover()
• useImageOnLoad()
• useIntersectionObserver()
• useInterval()
• useIsClient()
• useIsFirstRender()
• useIsMounted()
• useIsomorphicLayoutEffect()
• useLocalStorage()
• useLockedBody()
• useMap()
• useMediaQuery()
• useMousePosition()
• useOnClickOutside()
• usePrefersReducedMotion()
• useRandomInterval()
• useReadLocalStorage()
• useRetryUntilResolved()
• useScreen()
• useScript()
• useSessionStorage()
• useSsr()
• useStep()
• useStickyState()
• useTernaryDarkMode()
• useTimeout()
• useToggle()
• useUpdateEffect()
• useWindowSize()

🧩 Components

• ClientOnly()
• InPortal()
• ShiftBy()
• VisuallyHidden()

🛠️ Utils

• debounce()
• random()
• range()

🤝 How to Contribute

Thanks for wanting to contribute! It's more than welcome 🤗

🔄 Content changes

Most content changes (like fixing a typo) can be made without cloning the repository. Simply locate the file you wish to change in the GitHub UI, and click the little edit icon to make your change directly on the GitHub website.

If you need to make any other substantial changes, then follow the project setup steps below.

🍴 Fork to submit a Pull Request (PR)

Fork the repository, clone it and install.

git clone https://github.com/{your_username}/reactchemy.git
cd reactchemy
pnpm i

📝 Create or update a new data

# This command generates boilerplate for new component.
# Skip if updating an existed hook.
pnpm gen-component

# This command generates boilerplate for new hooks.
# Skip if updating an existed hook.
pnpm gen-hook

# This command generates boilerplate for new util.
# Skip if updating an existed hook.
pnpm gen-util

# start working
pnpm dev
# or
pnpm dev --filter=web # next dev

# Develop
pnpm build
pnpm lint
pnpm types-check
pnpm test

ℹ️ How is a data structured?

📂 ./packages/reactchemy
├── 📂 src
│  ├── 📂 components
│  │  ├── 📂 ComponentName
│  │  │   │── 📄 ComponentName.demo.tsx # working demo
│  │  │   │── 📝 ComponentName.mdx # the documentation content
│  │  │   │── 🧪 ComponentName.test.ts # unit tests
│  │  │   └── 📄 ComponentName.tsx # the component
│  ├── 📂 hooks
│  │  ├── 📂 useHookName
│  │  │   │── 📄 hookName.demo.tsx # working demo
│  │  │   │── 📝 hookName.mdx # the documentation content
│  │  │   │── 🧪 hookName.test.ts # unit tests
│  │  │   └── 📄 hookName.ts # the hook
│  ├── 📂 utils
│  │  ├── 📂 util-name
│  │  │   │── 📄 util-name.demo.tsx # working demo
│  │  │   │── 📝 util-name.mdx # the documentation content
│  │  │   │── 🧪 util-name.test.ts # unit tests
│  │  │   └── 📄 util-name.ts # the util
 
...

When the reactchemy is compiled, only the necessary files are used. The other files are copied in the documentation website.

Note: The demo is used different way:

• It's displayed on the website to illustrate how to use the hook.
• It's deployed as a CodeSandbox on build to let final users play with.

This project follows the all-contributors specification (emoji key). Contributions of any kind welcome!

🚗 Roadmap

• Unit-test all hooks
• Unit-test all components
• Unit-test all utils
• Add more components
• Add more hooks
• Add more utils

📜 License

MIT - Copyright (c) 2023 Dennis Ollhoff