rc-perfect-components

A collection of perfect React components.

Installation

npm install rc-perfect-components

Usage

Here is an example of how to use the Button component in your React application: jsx Copy code

import React from 'react';
import { Button } from 'rc-perfect-components';

const MyComponent = () => {
  return (
    <div>
      <Button onClick={() => alert('Button clicked!')}>Click Me</Button>
    </div>
  );
};

export default MyComponent;

Props

A customizable button component with various styles and options.

| Prop | Type | Default | Description | | ---------- | -------- | ----------------- | ------------------------------------------------------------------------------------------------ | | children | node | - | The content of the button. This prop is required. | | onClick | func | - | Function to call when the button is clicked. | | ripple | bool | false | If true, a ripple effect will be displayed when the button is clicked. | | rippleCn | string | - | Custom class names for the ripple effect. | | variant | string | default | The variant of the button. One of: default, outline, light, ghost, danger, disabled. | | loading | bool | false | If true, the button will show a loading state. | | loader | node | - | Custom loader element to display when loading is true. | | loaderText | string | 'please wait...' | Text to display when loading is true. | | rightIcon | node | - | Icon to display on the right side of the button. | | leftIcon | node | - | Icon to display on the left side of the button. | | className | string | - | Custom class names for the button. |

Example

jsx Copy code

import React from 'react';
import { Button } from 'rc-perfect-components';

const MyComponent = () => {
  return (
    <div>
      <Button
        variant="outline"
        ripple
        onClick={() => alert('Button clicked!')}
      >
        Click Me
      </Button>
    </div>
  );
};

export default MyComponent;

License

This project is licensed under the MIT License.