They React

Collection of modules for an easier React life

Table of Contents

• Use in your own project
  • Prerequisites
  • Usage
• Modules
  • Clipboard
    • useCopyToClipboard
    • CopyToClipboardIconButton
• Contributing
  • Prerequisites
  • Local Dev
  • Adding new dependencies
  • Deployment
    • NPM
    • Docs

Use in your own project

See the Storybook for a list of available UI components.

Prerequisites

• React
• MUI

Usage

Install the package:

npm install @they-consulting/react

yarn add @they-consulting/react

Then you can use the components in your project:

import { CopyToClipboardIconButton } from '@they-consulting/react';

const MyComponent = () => {
  return <CopyToClipboardIconButton value="Hello World!" />;
};

Modules

Clipboard

useCopyToClipboard

A hook that copies a given value to the clipboard.

import { useCopyToClipboard } from '@they-consulting/react';

const MyComponent = () => {
  const { copied, handleCopy } = useCopyToClipboard('Hello World!');

  return <button onClick={handleCopy}>{copied ? 'Copied' : 'Copy to clipboard'}</button>;
};

CopyToClipboardIconButton

A button that copies a given value to the clipboard.

import { CopyToClipboardIconButton } from '@they-consulting/react';

const MyComponent = () => {
  return <CopyToClipboardIconButton value="Hello World!" />;
};

Contributing

Prerequisites

• nvm optional, recommended
• nodejs version 20.X

Local Dev

Install dependencies:

npm install

Start the Storybook server:

npm run dev

Adding new dependencies

If you add a new dependency, you need to decide if it should be bundled with the library or not. In case it should be bundled, add it to the dependencies in the package.json. Otherwise, include it in both devDependencies and peerDependencies instead. Also make sure to include peer dependencies that should not be bundled to the externals in vite.config.ts. For this to work, the import source must be identical to the external entry:

import { Box } from '@mui/material'; // this matches the external entry and will not be bundled

import { Box } from '@mui/material/Box'; // this doesn't match and will be bundled

Deployment

NPM

The package is automatically published to npm when a new release is created. Before creating a new release, make sure to update the version in the package.json. We use semantic versioning.

Docs

Storybook is automatically deployed to GitHub Pages when a new commit is pushed to the main branch. A GitHub action runs that builds and deploys the storybook to the gh-pages branch.