Welcome to content-editable-wrapper 👋

This is project was built to be an editable wrapper for any html tag. It takes care of sending the data for that section to the API, and can also encapsulate an image.

🏠 Homepage

Prerequisites

• Node >= 14.0.0
• React >= 16.0.0

Install

npm install --save-dev content-editable-wrapper

Usage

import { EditableWrapper } from 'content-editable-wrapper'
import { useState, useEffect } from 'react'
import { getPageData } from 'dispatchable-actions'

const Homepage = () => {
  const [pageData, setPageData] = useState()

  useEffect(() => {
    if(!pageData) return
    const data = getPageData()
    setPageData(data);
  }, [pageData])

  const handleFinishEditing = async (id, newContent) => {
    await axios.post(`my-uri/${id}`, newContent)
  }

  return (
    <>
      {pageData &&
        (<div>
          <EditableWrapper
            data={pageData}
            sectionId="header"
            sectionName="banner"
            handleFinishEditing={handleFinishEditing}
           >
            <h1>
              {pageData.content.header}
            </h1>
          </EditableWrapper>

          <EditableWrapper
            data={pageData}
            sectionId="image"
            sectionName="banner"
            isImage
            padding="20px"
            handleFinishEditing={handleFinishEditing}
           >
            <img src={pageData.content.image}
            style={{
                width: "200px"
            }}>
          </EditableWrapper>
        </div>
        )}
    </>
  )
}

//--- dispatchable-actions.js ---
export const getPageData = () =>  {
    return {
      resource: 'My website',
      page: 'Home Page,
      type: 'banner', //SectionName,
      content: {
          header: "This is the end", //sectionId
          image: "url" //sectionId
      },
      id: 'data-id'
    }
}

sectionId: string

data-key for actual data in the elements, data.content[data-key]

data: any

structure

{
  id: any,
  resource: string, // like app name or website name
  page: string, // 😑 page name
  type: string, // sectionName
  content: {
    [any-key]: any //sectionId
  }
}

isValidated: boolean

Allow the data to be edited

sectionName: string

Html section name

sectionId: string

Html section Id

isImage: string

If it's an Image

uploadCareKey: string

The image edit section is built on upload care, for now. https://github.com/uploadcare/react-widget

Author

👤 Chinoso Jude

🤝 Contributing

Contributions, issues and feature requests are welcome! Create a pull request and it will be reviewed and merged

Show your support

Give a ⭐️ if this project helped you!