Component Editable

With this Editable Wrapper you can make any React Component Editable and get rawHtml or styledHtml based on ypur need.

Usage

• Wrap any Component in Editable wrapper and pass editable true.
• You can get rawHtml or styledHtml whenever you need using onChange listener.

import Editable from 'component-editable';

function App() {
  return (
    <>
      // ... some other components
      <Editable
        editable  // true if inner content is editable
        onChange={(rawHtml, styledHtml) => console.log(rawHtml, styledHtml)}
      >
        <h1>Test Heading</h1>
        <p className="read-the-docs">
          This Content is placeholder
        </p>
      </Editable>
      // ... some other components
    </>
  )
}

export default App;

Props

prop	function	default
editable	Set if content is editable	true
onChange	Listener to get rawHtml and styledHtml of Wrapeed Component	() => {}
rootSelector	It's used to get the root of the react app for styledHtml	#root
linksRoot	it's the starting path of assets used in page for styledHtml	/