# Use React (beta)

WARNING

React support is still in beta. We only support content props at this moment. We are working on improving this section and add more features.

# Initiate a React element repository

The developement process is the same as the Vue one described here The only difference is that you need to add an option to initiate the template as a React component

# npm 6.x (use npm -v to know your version)
npm init @weweb/component my-element --type element --react

# npm 7+, extra double-dash is needed (use npm -v to know your version)
npm init @weweb/component my-element -- --type element --react

# yarn
yarn create @weweb/component my-element --type element --react

Compatibility note

weweb use React 16

# React component

Your React component will receive a content props, similar to the Vue component one.

import React from "react";

export default (props) => {
    const style = { color: props.content && props.content.textColor };

    return (
        <div>
            <p style={style}>I am a custom element !</p>
        </div>
    );
};

WARNING

For now, we do not support wwDefaultContent for React.

# ww-config.json

The configuration file supports exactly the same options as a Vue component. The only difference is that you need to add a property to indicate that you are using React

{
    "componentPath": "./src/wwElement.jsx",
    "isReact": true,
    "editor": {
        "label": {
            "en": "My React Element"
        },
    }
}