react.js dynamically generated forms based on DRF HTTP OPTIONS

Question

Is there any package for rendering forms in react based on django-rest-framework OPTIONS?

I mean to have the form rendered based on smth like this:

{
    "name": "Spots Rating List",
    "description": "",
    "renders": [
        "application/json",
        "text/html"
    ],
    "parses": [
        "application/json",
        "application/x-www-form-urlencoded",
        "multipart/form-data"
    ],
    "actions": {
        "POST": {
            "pk": {
                "type": "integer",
                "required": false,
                "read_only": true,
                "label": "ID"
            },
            "created_at": {
                "type": "datetime",
                "required": false,
                "read_only": true,
                "label": "Created at"
            },
            "updated_at": {
                "type": "datetime",
                "required": false,
                "read_only": true,
                "label": "Updated at"
            },
            "is_enabled": {
                "type": "choice",
                "required": false,
                "read_only": false,
                "label": "Is enabled",
                "choices": [
                    {
                        "value": false,
                        "display_name": "Not allowed"
                    },
                    {
                        "value": true,
                        "display_name": "Allowed"
                    }
                ]
            },
            "friendly_rate": {
                "type": "choice",
                "required": true,
                "read_only": false,
                "label": "Friendly rate",
                "choices": [
                    {
                        "value": 1,
                        "display_name": "terrible"
                    },
                    {
                        "value": 2,
                        "display_name": "poor"
                    },
                    {
                        "value": 3,
                        "display_name": "average"
                    },
                    {
                        "value": 4,
                        "display_name": "very good"
                    },
                    {
                        "value": 5,
                        "display_name": "excellent"
                    }
                ]
            },
            "opinion": {
                "type": "nested object",
                "required": false,
                "read_only": true,
                "label": "Opinion",
                "children": {
                    "pk": {
                        "type": "field",
                        "required": true,
                        "read_only": false,
                        "label": "Rating"
                    },
                    "created_at": {
                        "type": "datetime",
                        "required": false,
                        "read_only": true,
                        "label": "Created at"
                    },
                    "updated_at": {
                        "type": "datetime",
                        "required": false,
                        "read_only": true,
                        "label": "Updated at"
                    },
                    "opinion_text": {
                        "type": "string",
                        "required": true,
                        "read_only": false,
                        "label": "Opinion text",
                        "max_length": 500
                    }
                }
            },
            "tags": {
                "type": "field",
                "required": false,
                "read_only": false,
                "label": "Tags"
            },
            "user": {
                "type": "field",
                "required": false,
                "read_only": true,
                "label": "User"
            }
        }
    }
}

Can not any reference on the web. Most are hardcoded components, what is for me ugly, and poor... https://www.valentinog.com/blog/tutorial-api-django-rest-react/#Django_REST_with_React_building_a_React_form

Or it will be ok too if it will be possible at least to get the generated component code for the form.

Answer 1

I know this is not the complete answer but it is worth noting DRF Schema Adapter is the project aimed to perform exporting this DRF metadata feature for frontend frameworks. Currently, it is only available for Ember and Angular, but it seems it isn't too hard to write your own adapter for React since it provides MobxAxiosAdapter to be used with React.

Even if you don't have resources to develop such a thing, you can bookmark this lib and wait until forms in React are supported.