@ksense-tech/components v1.3.4

@ksense-tech/components

A collection of reusable React components for building amazing user interfaces.

Installation

You can install this library using npm or yarn:

npm install @ksense-tech/components

or

yarn add @ksense-tech/components

Usage

Import the components you need and start building!

import React from "react";
import { RichTextEditor, RichTextEditorProps } from "@ksense-tech/components";


const App = () => {
  const props: RichTextEditorProps = {
    // ...Your props here
  };

  return (
    <div>
      <RichTextEditor {...props} />
    </div>
  );
};

export default App;

Styling

This library provides customizable styles for its components. You can use the "sx" prop to apply custom styles using Emotion's CSS-in-JS syntax:

<RichTextEditor
  {...props}
  sx={{
    backgroundColor: "blue !important",
    color: "white !important",
    "&:hover": {
      backgroundColor: "darkblue  !important",
    },
    "& .toolbar": {
      backgroundColor: "lightblue  !important",
    },
  }}
/>

Images

This component library facilitates seamless image uploading within the editor.

To enable image uploading within your editor, utilize the handleFileUpload prop. This prop expects a function that receives the File being uploaded and should return a corresponding URL.

For instance, when selecting an image for upload, the handleFileUpload method is invoked to store the image in a desired location (e.g., S3). The method's output, an image URL, serves as the source (src) for an img element.

Beyond the toolbar's image insertion, users can conveniently add images via copy-pasting or drag-and-dropping files directly into the editor.