@ssddkk/react-button-sdk

A customizable button SDK for React and Next.js applications. This SDK provides a simple yet powerful button component that accepts custom actions.

Installation

npm install @ssddkk/react-button-sdk

or

yarn add @ssddkk/react-button-sdk

Usage

Basic Usage

import React from 'react';
import { ClickMeButton } from '@ssddkk/react-button-sdk';

function App() {
  const handleButtonClick = () => {
    alert('Button clicked!');
  };

  return (
    <div>
      <ClickMeButton action={handleButtonClick} />
    </div>
  );
}

export default App;

Advanced Usage with Props

import React from 'react';
import { ClickMeButton } from '@ssddkk/react-button-sdk';

function App() {
  const handleCustomAction = () => {
    console.log('Custom action performed!');
    // Your custom logic here
  };

  const handleApiCall = async () => {
    try {
      const response = await fetch('/api/data');
      const data = await response.json();
      console.log('API Response:', data);
    } catch (error) {
      console.error('API Error:', error);
    }
  };

  return (
    <div style={{ padding: '20px', display: 'flex', gap: '10px', flexDirection: 'column' }}>
      {/* Basic button */}
      <ClickMeButton action={handleCustomAction} />
      
      {/* Custom text */}
      <ClickMeButton 
        action={handleCustomAction} 
        text="Custom Button Text" 
      />
      
      {/* Different variants */}
      <ClickMeButton 
        action={handleCustomAction} 
        text="Primary Button" 
        variant="primary" 
      />
      
      <ClickMeButton 
        action={handleCustomAction} 
        text="Danger Button" 
        variant="danger" 
      />
      
      <ClickMeButton 
        action={handleCustomAction} 
        text="Success Button" 
        variant="success" 
      />
      
      {/* Custom styling */}
      <ClickMeButton 
        action={handleCustomAction} 
        text="Custom Styled" 
        style={{
          backgroundColor: '#ff6b6b',
          color: 'white',
          borderRadius: '25px',
          padding: '15px 30px'
        }}
      />
      
      {/* API call example */}
      <ClickMeButton 
        action={handleApiCall} 
        text="Make API Call" 
        variant="secondary"
      />
      
      {/* Disabled button */}
      <ClickMeButton 
        action={handleCustomAction} 
        text="Disabled Button" 
        disabled={true}
      />
    </div>
  );
}

export default App;

Next.js Usage

// pages/index.js or app/page.js
'use client'; // Only needed in Next.js 13+ app directory

import { ClickMeButton } from '@ssddkk/react-button-sdk';

export default function Home() {
  const handleClick = () => {
    console.log('Next.js button clicked!');
  };

  return (
    <main style={{ padding: '20px' }}>
      <h1>My Next.js App</h1>
      <ClickMeButton 
        action={handleClick} 
        text="Next.js Button"
        variant="primary"
      />
    </main>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | action | () => void | Required | Function to execute when button is clicked | | text | string | "Click me" | Text to display on the button | | className | string | "" | Custom CSS class name | | style | React.CSSProperties | {} | Custom inline styles | | disabled | boolean | false | Whether the button is disabled | | variant | 'primary' \| 'secondary' \| 'danger' \| 'success' | 'primary' | Button style variant |

Variants

• primary: Blue background (default)
• secondary: Gray background
• danger: Red background
• success: Green background

TypeScript Support

This SDK is written in TypeScript and includes full type definitions. You can import the types:

import { ClickMeButton, ClickMeButtonProps } from '@ssddkk/react-button-sdk';

Features

• ✅ Works with React 16.8+ and Next.js
• ✅ TypeScript support
• ✅ Customizable styling
• ✅ Multiple button variants
• ✅ Hover effects
• ✅ Disabled state support
• ✅ Custom action handling
• ✅ Zero dependencies (except React peer dependency)

Browser Support

This SDK supports all modern browsers that support ES5 and React.

License

MIT