react-fabric-canvas-designer
Version:
A React-based wrapper for Fabric.js to create interactive and customizable canvas-based designs. This library provides tools for drawing, editing, and managing objects on a canvas with React-friendly APIs.
199 lines (145 loc) • 6.86 kB
Markdown
# React Fabric Canvas Designer
A React-based wrapper for Fabric.js to create interactive and customizable canvas-based designs. This library provides tools for drawing, editing, and managing objects on a canvas with React-friendly APIs.
## Features
- **Drawing Tools**: Rectangle, Ellipse, Text, and Selection tools.
- **Object Manipulation**: Resize, rotate, align, and layer objects.
- **Customizable Properties**: Modify object properties like color, size, font, and more.
- **Google Fonts Integration**: Load and use Google Fonts dynamically.
- **JSON Import/Export**: Save and load canvas states as JSON.
- **React Components**: Prebuilt React components for user-friendly input controls.
## Installation
Install the package via npm:
```bash
npm install react-fabric-canvas-designer
```
## Usage
### Basic Example
```tsx
import { observer, useGoogleFontsLoader, useReactFabricCanvas } from 'react-fabric-canvas-designer';
const App = observer(() => {
const { fonts, loading } = useGoogleFontsLoader("https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Fredoka:wght@300..700&family=Inconsolata:wght@200..900&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Pacifico&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap")
const { UIComponent, reactFabricStore } = useReactFabricCanvas({ backgroundColor: "white", canvasHeight: 500, canvasWidth: 1000, fontList: fonts })
if (loading || !reactFabricStore)
return <h1>Loading...</h1>
return <div className="grid grid-cols-12 grid-rows-12 gap-2 bg-gray-400 h-screen w-full">
<div className="row-span-7 col-start-1 row-start-3">
<div className='grid grid-cols-2 justify-items-center '>
{reactFabricStore.availableTools.positionTools.map((tool, i) => {
return <span key={i}>
{tool.UIComponent}
</span>
})}
</div>
<div className='grid grid-cols-2 mt-5 justify-items-center '>
{reactFabricStore.availableTools.alignmentTools.map((tool, i) => {
return <span key={i}>
{tool.UIComponent}
</span>
})}
</div>
</div>
<div className="overflow-auto justify-self-center self-center col-span-9 row-span-9 col-start-2 row-start-2">
{UIComponent}
</div>
<div className="col-span-2 row-span-12 col-start-11 row-start-1 overflow-y-scroll">
{reactFabricStore.availableProperties.map((property, i) => {
return <div key={i} className='justify-self-center'>
<label className='text-xl font-semibold'>{property.name}</label>
{property.UIComponent}
</div>
})}
</div>
<div className="col-span-7 col-start-3 row-start-11 flex justify-around">
{reactFabricStore.availableTools.creationTools.map((tool, i) => {
return <span key={i}>
{tool.UIComponent}
</span>
})}
</div>
</div>
})
export default App
```
Note: Component should be wrapped using ```observer```, otherwise the value might not update as expected
### Google Fonts Integration
Use the `useGoogleFontsLoader` hook to dynamically load Google Fonts:
```tsx
import React from 'react';
import { useGoogleFontsLoader } from 'react-fabric-canvas-designer';
const App = () => {
const { fonts, loading } = useGoogleFontsLoader(
'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'
);
if (loading) return <p>Loading fonts...</p>;
return (
<div>
<h1>Available Fonts</h1>
<ul>
{fonts.map((font) => (
<li key={font.name}>{font.name}</li>
))}
</ul>
</div>
);
};
export default App;
```
## API Reference
### `useReactFabricCanvas`
#### Props
| Prop | Type | Default | Description |
|------------------|---------------|-----------|------------------------------------------|
| `canvasWidth` | `number` | `300` | Width of the canvas in pixels. |
| `canvasHeight` | `number` | `200` | Height of the canvas in pixels. |
| `backgroundColor`| `string` | `#ffffff` | Background color of the canvas. |
| `fontList` | `FontInfo[]` | `[]` | List of fonts to be used in the canvas. |
#### Returns
| Key | Type | Description |
|--------------------|---------------------|------------------------------------------|
| `UIComponent` | `React.ReactNode` | The canvas component to render. |
| `reactFabricStore` | `ReactFabricStore` | Store instance for managing the canvas. |
### `useGoogleFontsLoader`
#### Props
| Prop | Type | Description |
|-----------|----------|------------------------------------------|
| `cssUrl` | `string` | URL to the Google Fonts CSS file. |
#### Returns
| Key | Type | Description |
|-----------|---------------|------------------------------------------|
| `fonts` | `FontInfo[]` | List of loaded fonts. |
| `loading` | `boolean` | Indicates if fonts are still loading. |
## Input Components
The library provides prebuilt React components for user-friendly input controls:
- `InputText`: Text input.
- `InputNumber`: Number input with increment/decrement buttons.
- `InputRange`: Range slider.
- `InputColor`: Color picker.
- `InputSelect`: Dropdown select.
## Development
### Scripts
- `npm run build`: Build the library for production.
- `npm run dev`: Start the development server with live reloading.
- `npm run build:css`: Build Tailwind CSS.
- `npm run dev:css`: Watch and build Tailwind CSS.
- `npm test`: To test the library.
### Testing
This package uses Jest and React Testing Library for unit testing. To run tests:
```bash
npm run test
```
### Folder Structure
```
src/
├── Hooks/ # Custom React hooks
├── Objects/ # Fabric.js object wrappers
├── UserFirendlyInput/ # Input components
├── types/ # TypeScript type definitions
├── helpers/ # Utility functions
└── index.tsx # Entry point
```
## License
This project is licensed under the MIT License.
## Contributing
Contributions are welcome! Please open an issue or submit a pull request.
## Author
Developed by VMMOORTHY.