@holmesdev/sync NPM

SYNC COMPONENTS

Add some flair to your projects by trying our dazzling yet practical Button & Alert components! Built with user interactivity and accessibility in mind, choose from an array of themes/variant types pertaining to each level of action severity, along with customizable options to tailor and enhance the functionality of each component.

Check out our documentation site for visuals of our components.

Table of Contents (Sticky)

Installation

Run either of these commands inside the terminal:

  $ npm install @holmesdev/sync
  $ yarn add @holmesdev/sync

!IMPORTANT > Styled-components is the JavaScript CSS library used to build our components. To ensure that they work as intended, you will need to separately install styled-components within both the devDependencies & peerDependencies inside of your package.json upon installation of the package.
You MUST also ensure that you are:
Using React.js v18.3.1 or higher
Using styled-components v6.1.13 or higher

Latest Package Version

Name	Version
`@holmesdev/sync`

Install the latest package version if required:

  $ npm install @holmesdev/sync@latest
  $ yarn add @holmesdev/sync@latest

Usage

Import the components (together or separately, depending on usage) inside your project:

import { Button, Alert, AlertDialog } from "@holmesdev/sync";

Button Component

A Button that allows the user to trigger an action when clicked. It comes with a selection of themes/variants.

import { Button } from "@holmesdev/sync";

<Button
  variant="primary"
  hoverColor="#1f56ec"
  path="https://sync-documentation.onrender.com/"
>
  Click Me
</Button>

_________________________________________________

//BUTTON STATUS EXAMPLES:

<Button
  variant="success"
  hoverColor="#1cd560"
  type = "submit"
>
  Success Action
</Button>

Alert Component

An Alert box that appears on the page with a status notification or an action request. It comes with a selection of themes/statuses.

import { Alert } from "@holmesdev/sync";

<Alert
  title="Success!"
  body="Your action was completed successfully."
  status="success"
/>

________________________________________________

//ALERT STATUS EXAMPLES:

<div>

// Success Alert
<Alert
  title="Success!"
  body="Your action was completed successfully."
  status="success"
/>

// Error Alert
<Alert
  title="Error!"
  body="Something went wrong. Please try again."
  status="error"
/>

// Warning Alert
<Alert
  title="Warning!"
  body="Be careful! This action could have consequences."
  status="warning"
/>

AlertDialog Component

The role of AlertDialog is to "link" the Alert & Button components together, as well as toggling the visibility of the Alert on the page.

import { AlertDialog } from "@holmesdev/sync";

<AlertDialog
  title="Success!"
  body="Your action was completed successfully."
  status="success"
  buttonVariant="success"
  btnColor="#28a745"
  hoverColor="#218838"
>
  Show Success
</AlertDialog>

________________________________________________

//ALERTDIALOG STATUS EXAMPLES:

<AlertDialog
  title="Error"
  body="Something went wrong. Please try again."
  status="danger"
  buttonVariant="warning"
  btnColor="#dc3545"
  hoverColor="#c82333"
>
  Show Error
</AlertDialog>

Props

Button Component

Prop	Type	Required	Description
`children`	`string`	Yes	Text or content inside the `Button`.
`variant`	`string`	No	`Button` style. Options: `default`, `primary`, `success`, `warning`.
`hoverColor`	`string`	No	Color displayed on hover.
`path`	`string`	No	URL path if the button is used as a link.
`type`	`string`	No	`Button` type attribute. Options: `button`, `submit`, `reset`. Default is `button`.
`onClick`	`function`	Yes	Callback function for the button click event.

Alert Component

Prop	Type	Required	Description
`title`	`string`	Yes	Content to be displayed inside the `Alert`.
`status`	`string`	Yes	Alert type. Options: `default`, `primary`, `success`, `warning`, `defaultDark`, `primaryDark`, `successDark`, `warningDark`.
`body`	`string`	Yes	Body text displayed inside the `Alert`.

AlertDialog Component

Prop	Type	Required	Description
`title`	`string`	Yes	Title text displayed inside the component.
`body`	`string`	Yes	Body text displayed inside the component.
`children`	`string`	Yes	The child elements of the button component.
`btnColor`	`string`	Yes	Specifies the `X close button`'s color.
`ariaLabel`	`string`	No	Accessibility label for screen readers, describing the purpose of the dialog.
`status`	`enum`	Yes	Specifies the visual theme – Options: `["default", "primary", "success", "warning", "defaultDark", "primaryDark", "successDark", "warningDark"]`.
`buttonVariant`	`enum`	Yes	Specifies the `Button`'s variant – Options: `["default", "primary", "success", "warning"]`.
`isOpen`	`boolean`	No	If `true`, the component is open; if `false`, the component isn't open.
`onClose`	`function`	No	Called when the component is closed.