react web editor
1.0.0
The react-web-editor is easy to use. It is designed user friendly!
The react-web-editor is light and simple.
The react-web-editor is react-friendly. You can use hooks for your own component.
The react-web-editor has a tools for customizing.
It was built using webpack so that you can fully control configuration management and project extension with custom settings.
npm -i react-web-editorimport { StyleEditorBlock, TextEditorBlock, ... } from "react-web-editor;or you can import as below
import ReactWebEditor from "react-web-editor";| Version | Log |
|---|---|
| 2.2.0 | Upgrade Ui, Fix Hooks usage |
| 2.1.0 | Upgrade Drag and Drop feature |
| 2.0.0 | Create Editable Board, minor bug update |
| 1.2.0 | Upgrade Text Editor to initialize options |
| 1.1.0 | Upgrade editor to use unit like "rem" |
| ~ 1.0.5 | Use helmet, Update helmet to async |
| ~ 1.0.2 | Upgrade Drag and Drop feature, Solve minor Ui bug |
| 1.0.0 | Add Text Editor |
| 0.1.6 | Upgrade Style editor features |
| ~ 0.1.5 | Solve Next.js Font disappear bug |
These components are designed to be user friendly. Easily control components using no more than props.
The Style Editor Component(SEC) is a block component which can change size and location of components. Another powerful usage of The SEC is uploading images on the screen or changing a component's background color. By wrapping a component with the SEC and setting the position of the component ‘absolute’, the component becomes editable on an website. This component also can be used without your own component.
Two tabs will appear on the screen when you hover a cursor on the component. The First tab is a uploading image tab, which is help you add an image. The Second tab is a color handler. It changes component's background color.
type StyledEditorBlockProps {
width: number;
height: number;
top: number;
left: number;
parentStyle?: ParentStyle; // It defines area where component can't escape. If you don't define it, then your component can move in all screen.
unit: string;
initialColor?: string; // default: transparent
initialImage?: string; // default: none
}
type ParentStyle {
width: number;
height: number;
} import { StyleEditorBlock } from "react-web-editor"
...
return (
<StyleEditorBlock
width={200}
height={300}
left={left}
top={top}
parentStyle={{ width: 600, height: 800 }}
unit={"px"}
>
<YourOwnComponent color={color} /> // It is just a option.
</StyleEditorBlock>
); type TextEditorBlockProps {
width: number;
height: number;
top: number;
left: number;
parentStyle?: ParentStyle; // It defines area where component can't escape. If you don't define it, then your component can move in all screen.
unit: string;
// Initial- props are options just for first rendering.
initialFontSize?: number; // default: 0.22
initialFontColor?: string; // default: "black"
initialFontStyle?: InitialFontStyle; // default: ""
initialText?: string; // default: ""
initialFontName?: string; // default: ""
}
type ParentStyle {
width: number;
height: number;
}
type InitialFontStyle = "twin-color-text" | "box-text" | "down-side-text" | "out-line-text" | "bubble-shadow-text";
type InitialFontName = "andada-pro" | "bebas-nenu" | "montecarlo" | "roboto" | "stix-two-text" | "style-script"; import { TextEditorBlock } from "react-web-editor"
...
return (
<TextEditorBlock
width={200}
height={300}
left={left}
top={top}
parentStyle={{ width: 600, height: 800 }}
unit={"px"}
/>
); type DragAndDropTableProps {
color?: string;
isVertical: boolean;
} import { DragAndDropTable } from "react-web-editor"
...
return (
<DragAndDropTable
color={"pink"}
isVertical={true}
>
<YourOwnComponent src={cat} />
<YourOwnComponent src={flower} />
<YourOwnComponent src={bee} />
// These components can drag and drop in the DragAndDropTable component.
</DragAndDropTable>
); type useDraggableProps {
left: number;
top: number;
width: number;
height: number;
dragBoardOption?: DragBoardOption;
unit: string;
onDrag: Dispatcher<ComponentStyle>; // It is a setState. Its state is Componentstyle.
}
type Dispatcher<S> = React.Dispatch<React.SetStateAction<S>>;
type ComponentStyle {
left: number;
top: number;
width: number;
height: number;
}
type DragBoardOption {
width: number;
height: number;
}
// It's like a parentStyle. import { useState } from "react";
import { useDraggable } from "react-web-editor";
const [componentStyle, setComponentStyle] = useState({
width: 20,
height: 40,
top: 40,
left: 40,
});
// this state can be used for your own component.
const {
handleDragEnd, // onMouseUp handler
handleDragStart, // onMouseDown handler
} = useDraggable({
...componentStyle,
onDrag: setComponentStyle,
unit: "px",
});| return | usage |
|---|---|
| handleDragStart | onMouseDown handler |
| handleDragEnd | onMouseUp handler |
This component can be used with DraggableHandler, and EditorBlockWrapper.
It returns Resize handlers. It can be used with "ResizeHandlerWrapper", The helper component to resize.
type useResizeProps {
left: number;
top: number;
width: number;
height: number;
resizeBoardOption?: ResizeBoardOption;
unit: string;
onResize: Dispatcher<ComponentStyle>; // It is a setState. Its state is Componentstyle.
}
type Dispatcher<S> = React.Dispatch<React.SetStateAction<S>>;
type ComponentStyle {
left: number;
top: number;
width: number;
height: number;
}
type ResizeBoardOption {
width: number;
height: number;
}
// It's like a parentStyle. import { useState } from "react";
import { useResize, ResizeHandlerWrapper } from "react-web-editor";
const [componentStyle, setComponentStyle] = useState({
width: 20,
height: 40,
top: 40,
left: 40,
});
const { handleMouseDown } = useDraggable({
...componentStyle,
onResize: setComponentStyle,
unit: "px",
});| return | usage |
|---|---|
| handleMouseDown | onMouseDown handler |
This component can be used with ResizeHandlerWrapper and EditorBlockWrapper.
The UseImage hook helps upload and display images on the screen.
type UseImageProps {
initialImage?: string;
}import { useImage } from "react-web-editor";
...
const { imageSrc, handleImageChange } = useImage({ initialImage });| return | usage |
|---|---|
| imageSrc | string |
| handleFileChange | onChangeHandler of InputElement |
The UseColor hook returns color change handler.
type UseColorProps {
initialColor?: string;
}import { useColor } from "react-web-editor";
...
const { color, handleColorChange } = useColor({ initialColor });| return | usage |
|---|---|
| color | string |
| handleColorChange | onChangeHandler of InputElement |
These components help you customize and generate your own component. You can make your own library using this feature. It lets you easily handle hooks and editor components.
type EditableBoardProps {
width: number;
height: number;
backgroundColor: string;
left?: number;
top?: number;
unit: string;
} import { EditableBoard, StyleEditorBlock } from "react-web-editor"
...
const boardWidth = 500;
const boardHeight = 500;
const boardStyleUnit = "px";
return (
<EditableBoard
width={boardWidth}
height={boardHeight}
backgroundColor={boardStyleUnit}
color={"pink"}
left={20}
top={20}
>
<StyleEditorBlock
...
parentStyle={{
width: boardWidth,
height: boardHeight,
}}
unit={"px"}
/>
</EditableBoard>
);The Editor Block Wrapper is a style component. The size and location of the component are received in props. It changes style dynamically with these props. It can be used with useResize and useDraggable
type EditorBlockWrapperProps {
width: number;
height: number;
left: number;
top: number;
}import { useState } from "react";
import { EditorBlockWrapper, useDraggable } from "react-web-editor";
const [componentStyle, setComponentStyle] = useState({
width: 20,
height: 40,
top: 40,
left: 40,
});
// this state can be used for your own component.
const {
handleDragEnd, // onMouseUp handler
handleDragStart, // onMouseDown handler
} = useDraggable({
...componentStyle,
onDrag: setComponentStyle,
unit: "px",
});
return (
<EditorBlockWrapper
width={componentStyle.width}
height={componentStyle.height}
top={componentStyle.top}
left={componentStyle.left}
onMouseDown={handleDragStart}
onMouseUp={handleDragEnd}
>
<YourOwnComponent style={{ position: "absolute" }}>
</EditorBlcokWrapper> // Now, This component dynamically change location.
);This component is specialized for the useResize hook. It generates vertices in the four directions of the component.
import { useState } from "react";
import { EditorBlockWrapper, ResizeHandlerWrapper, useResize } from "react-web-editor";
const [componentStyle, setComponentStyle] = useState({
width: 20,
height: 40,
top: 40,
left: 40,
});
// this state can be used for your own component.
const { handleMouseDown } = useDraggable({
...componentStyle,
onResize: setComponentStyle,
unit: "px",
});
return (
<EditorBlockWrapper
width={componentStyle.width}
height={componentStyle.height}
top={componentStyle.top}
left={componentStyle.left}
>
<ResizeHandlersWrapper>
{DIRECTIIONS.map((item) => (
<div key={item} className={item} onMouseDown={handleMouseDown} />
))}
</ResizeHandlersWrapper>
</EditorBlcokWrapper> // Now, This component can change size.
);
