JS Variable Primitives Typed Input

A react component based that shows an bunch of input to represent a javascript variable and it's primitives types.

🏗️ Installation

yarn add @sacercode/js-variable-primitives-types-input

Or from GitHub 😺+🐙:

npm install git+https://github.com/Sacercode/js-variable-primitives-types-input

⚙️ Usage and config

import React, { useState } from 'react';
import { usePath } from '@sacercode/react-use-path'

const MyComponent = () => {
    const [variable, setVariable] = useState();
    const [variableName, setVariableName] = useState();

    return (
        <JSVariablePrimitivesTypedInput
            onCreate={
                (variable, value) => {
                    console.log("variable : ", variable);
                    console.log("value : ", value);
                }
            }
            varName={variableName}
            onVariableNameBlur={(old, newValue) => setVariableName(newValue)}
            displayVariableName={true}
            displayVariableDeclarationTypes={true}
            
            value={variable}
            onVariableBlur={(old, newValue) => setVariable(newValue)}
            readonly={false}
            
            typeInput={inputType}
            allowTypeChange={true}
        />
    )
}

API

The js-variable-primitives-types-input allows using ref to access some methods and therefore, related data :

• value() : Returns the current value of the variable
• type() : Returns the current type of the variable
• valueCode() : Returns the variable value as code
• getVariableAsCode() : Returns the variable as code

Example :

import React, { useRef } from 'react';
const MyComponent = () => {
    const varRef = useRef(null);

    useEffect(
        () => {
            if(varRef.current) {
                console.log("value : %o", varRef.current.value());
                console.log("type : %o", varRef.current.type());
                console.log("valueCode : %o", varRef.current.valueCode());
                console.log("getVariableAsCode : %o", varRef.current.getVariableAsCode());
            }
        }, []
    );

    return (
        <JSVariablePrimitivesTypedInput ref="varRef"/>
    );
}