@precooked/react-play-pause-cell

The PlayPauseCell component is a reusable React component designed to toggle between a "play" and "pause" state. It integrates with an HTTP client for server communication and provides customizable callbacks for handling success and error states.

Installation

To install the package, use the following command:

npm install @precooked/react-play-pause-cell

Usage

Here's an example of how to use the PlayPauseCell component:

import React, { useState } from "react";
import { PlayPauseCell } from "@precooked/react-play-pause-cell";

const App = () => {
  const [isPlaying, setIsPlaying] = useState(false);

  const handleSuccess = (newValue: boolean) => {
    console.log("Success:", newValue);
    setIsPlaying(newValue);
  };

  const handleError = (error: any) => {
    console.error("Error:", error);
  };

  return (
    <PlayPauseCell
      value={isPlaying}
      size="md"
      endpoint="/api/play-pause"
      apiBaseUrl="https://api.example.com"
      useInterceptor={true}
      onChangeSuccess={handleSuccess}
      onChangeError={handleError}
    />
  );
};

export default App;

Props

| Prop Name | Type | Default | Description | |-------------------|---------------------------------------|----------|------------------------------------------------------------------| | value | boolean | true | The initial state of the cell (play or pause). | | size | "xs" \| "sm" \| "md" \| "lg" \| "xl" | "md" | Size of the component. | | className | string | undefined | Optional class name for custom styling. | | style | React.CSSProperties | undefined | Inline styles for the container. | | apiBaseUrl | string | undefined | Base URL for the HTTP client. | | endpoint | string | required | Endpoint for the HTTP request. | | useInterceptor | boolean | false | Whether to use interceptors with the HTTP client. | | onChangeSuccess| (newValue: boolean) => void | undefined | Callback invoked on successful state change. | | onChangeError | (error: any) => void | undefined | Callback invoked when an error occurs. |

Features

• Toggle between "play" and "pause" states.
• Customizable sizes: xs, sm, md, lg, xl.
• Integration with an HTTP client for server communication.
• Callbacks for success and error handling.
• Fully customizable via className and style props.

License

MIT © Precooked Code