Tridion-Sites-XPM-Minimal

React package for Tridion Sites to make the components of the tridion sites page react components editable

Installation

npm install xpm-minimal

Usage

    import { XpmMinProvider, XpmMinEditor } from "xpm-minimal";

    function App() {
        return (
            <XpmMinProvider editorUrl="https://example.com/ui/editor" icon={<img src="..." width={16} />}>
                <XpmMinEditor tcmId="tcm:x-xx">
                    <div>
                        <h2>Tridion Sites XPM Minimal</h2>
                        <p>Welcome to Tridion Sites XPM Minimal React Package</p>
                    </div>
                </XpmMinEditor>
            </XpmMinProvider>
        );
    }

<XpmMinProvider /> Props

| Prop | Type | Description | |------------------|-------------------------|----------------------------------| | editorUrl | string | Link to open on icon click | | icon | React.ReactNode | Custom icon (defaults to SVG) | | linkStyle | React.CSSProperties | Inline styles for the link | | iconStyle | React.CSSProperties | Inline styles for the icon | | containerStyle | React.CSSProperties | Inline styles for the container | | contentStyle | React.CSSProperties | Inline styles for the content | | children | React.ReactNode | Content inside the wrapper |

Example

    const App = () => {
        return (
            <XpmMinProvider
                editorUrl="https://example.com/ui/editor"
                icon={<SquarePen size={18} />}
                iconStyle={{... }}
                linkStyle={{ ... }}
                containerStyle={{...}}
                contentStyle={{...}}
            >
                <Post />
            </XpmMinProvider>
        )
    }

<XpmMinEditor /> Props

| Prop | Type | Description | |------------------|-------------------------|---------------------------------------| | tcmId | string | Tcmid id of the component |
| children | React.ReactNode | Content inside the wrapper | | isPage | boolean | Component type is Page or Component |

Example

    const Post = () => {
        return(
            <XpmMinEditor tcmId={tcm:x-xx}> 
                <h2>{...}</h2>
                <div>{....}</div>
            </XpmMinEditor>
        )
    }