react-label-editable

React Component to use label with button to editable value

Usage no npm install needed!

<script type="module">
  import reactLabelEditable from 'https://cdn.skypack.dev/react-label-editable';
</script>

README

react-label-editable

React Component to create Field Input/Label that is editable easily.

Install

npm i react-label-editable --save

yarn add react-label-editable

react-label-editable package

Example

example

Usage

import LabelEditable from 'react-label-editable';
import React, { useState } from 'react';

export default function FieldEditable(){
  const [ email, changeEmail ] = useState("");

  return (
    <div className="field">
      <label className="label" for="email">E-mail</label>
      <LabelEditable 
        value={email} //value that start label
        onChange={changeEmail} //changing email value
        startWithInput={false} //start with input or label
      />
    </div>
  );
}

CSS EDIT

  .LabelEditable { }   /* Container in the component */

  .LabelEditable .label-editable { } /* Only Label Element */

  .LabelEditable .input-editable { } /* Only Input Element */