Overview

A collection of hooks for React projects.

Prerequisites

• @playbooks/utils
• @playbooks/ui

Installation

npm install @playbooks/hooks

Usage

import { WelcomeMessage } from 'components/welcome/welcome-message';
import { WelcomeWrapper } from 'components/welcome/welcome-wrapper';
import { useLoaded } from '@playbooks/hooks';

const WelcomeRoute = ({ app, ssr, account, router, search, session, store, toast }) => {
	// Hooks
	const loaded = useLoaded();

	// Render
	return (
		<WelcomeWrapper title='Playbooks | Hybrid Source Software'>
			<WelcomeMessage
				tailwind={{
					animation: 'transition-all duration-200 ease',
					opacity: loaded ? 'opacity-100' : 'opacity-0',
					transform: loaded ? 'translateY(0)' : 'translateY(-4rem)',
				}}
			/>
		</WelcomeWrapper>
	);
};

export default WelcomeRoute;

Development

This project uses yalc for local development.

• npm run dev
• switch to project
• npx yalc add @playbooks/hooks
• After that, this library should hot reload into the consuming application

Scripts

• We've included a couple of helpful scripts for faster development.
• deploy: npm run deploy -- 'commit message'
• publish: npm run publish -- 'commit message' [major|minor|patch]

Husky

• Husky configuration is setup to lint and format the repo on every commit
• Edit the .husky/pre-commit file to change your settings

Author

• Eric Hubbell
• [email protected]

Notes

To see this library in action, checkout the following projects:

• playbooks
• playbooks blog
• playbooks docs