@gdev0007/react-dragger-resizable NPM

Here is a detailed README.md for your package react-resize-draggable-window with all necessary information, including installation, usage, and props:

react-resize-draggable-window

Overview

A simple, resizable, and draggable window component for React applications.

Installation

You can install it with npm:

npm i react-resize-draggable-window

Usage

Here's an example of how to use the CanvasWindow component in your React application:

import React from 'react';
import CanvasWindow from 'react-resize-draggable-window';

const App = () => (
  <CanvasWindow className="custom-class" isPortalDisabled={false}>
    <p>Your content here</p>
  </CanvasWindow>
);

export default App;

Props

The CanvasWindow component accepts the following props:

Prop Name	Type	Default	Description
className	string	''	Additional class names to apply to the window.
isPortalDisabled	boolean	true	Whether to disable the use of a portal for rendering the window.
defaultPosition	Position		The default position of the window.
defaultSize	Size		The default size of the window.
title	string		The title of the window.
isOpen	boolean		Whether the window is open.
children	ReactNode	null	The content to be displayed inside the window.
isDraggable	boolean		Whether the window is draggable.
isResizable	boolean		Whether the window is resizable.
footer	ReactNode		The footer content of the window.
onClose	Dispatch<SetStateAction>	undefined	Callback function to handle window close action.

Example

Here's a more detailed example demonstrating the use of the CanvasWindow component with additional props:

import React from 'react';
import CanvasWindow from 'react-resize-draggable-window';
import './App.css';

const App = () => (
  <CanvasWindow className="custom-class" isPortalDisabled={false}>
    <div>
      <h1>Resizable and Draggable Window</h1>
      <p>This is a resizable and draggable window component.</p>
    </div>
  </CanvasWindow>
);

export default App;

Custom Styles

You can apply custom styles to the CanvasWindow component by passing a className prop and defining the styles in your CSS file. Here's an example:

/* App.css */
.custom-class {
  border: 2px solid #000;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
}

Development

To run the development server and see the component in action, use the following commands:

npm install
npm start

Build

To build the package for production, use the following command:

npm run build

License

This project is licensed under the MIT License. See the LICENSE file for more details.

Contributing

Contributions are welcome! Please open an issue or submit a pull request for any improvements or bug fixes.

Acknowledgements

This package was inspired by the need for a simple, resizable, and draggable modal component in React applications.

A big thank you to receter for their contributions and support!

You can replace the content of your current README.md with the above text.

canvas react dragger resizable component library

@gdev0007/react-dragger-resizable

0.0.3

10 months ago

0.0.2

10 months ago

0.0.1

10 months ago