Motivation

Properties Editor (Visual Studio like) in React.

Installation

npm install react-prop-editor --save

State of Project

Proof of concept (not refactored js/css code)

Run Demo

npm install -g create-react-app
npm install
npm start

Example Config you can pass the component

let config = {
    "groups": [
        {
            "name": "Memcached",
            "properties": [
                {
                    "name": "memcached.sess_locking",
                    "type": "boolean",
                    "defaultValue": true,
                    "help": "Use session locking.",
                    "link": "http://php.net/manual/de/memcached.configuration.php#ini.memcached.sess-locking"
                },
                {
                    "name": "memcached.sess_consistent_hash",
                    "type": "boolean",
                    "defaultValue": false,
                    "help": "Memcached session consistent hash mode. If set to On, consistent hashing is used for session handling. When consistent hashing is used, one can add or remove cache node(s) without messing up too much with existing keys.",
                    "link": "http://php.net/manual/de/memcached.configuration.php#ini.memcached.sess-consistent-hash"
                },
                {
                    "name": "memcached.sess_binary",
                    "type": "boolean",
                    "defaultValue": false,
                    "help": "Use memcached session binary mode. Libmemcached replicas only work if binary mode is enabled",
                    "link": "http://php.net/manual/de/memcached.configuration.php#ini.memcached.sess-binary"
                },
                {
                    "name": "memcached.compression_type",
                    "type": "option",
                    "defaultValue": "fastlz",
                    "options": ["fastlz", "zlib"],
                    "help": "Set the compression type, valid values are: fastlz, zlib. The default is fastlz.",
                    "link": "http://php.net/manual/de/memcached.configuration.php#ini.memcached.compression-type"
                },
                {
                    "name": "memcached.sess_lock_wait",
                    "type": "number",
                    "defaultValue": 150000,
                    "help": "Session spin lock retry wait time in microseconds. Be carefull when setting this value. Valid values are integers, where 0 is interpreted as the default value. Negative values result in a reduces locking to a try lock. The default is 150000.",
                    "link": "http://php.net/manual/de/memcached.configuration.php#ini.memcached.sess-lock-wait"
                }
            ],
            "help": "http://php.net/manual/de/book.memcached.php"
        }
    ]
};

<App>
    <PropEditor config={config} handleInputChange={somefunctionhere} />
</App>