JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    React Editext

    Editable Text Component for React Apps
    Filed under 

    • 🔾29%Overall
    • 264
    • 5.7 days
    • 🕩35
    • 👥4
    react-editext

    react-editext

    Editable Text Component for React Applications

    NPM npm Github codecov Quality Gate Status Github All Contributors

    This project is generated from react-typescript-library template.

    Install

    npm install --save react-editext
    

    Or with yarn:

    yarn add react-editext
    

    Usage

    EdiText is highly customizable. You can see more examples here. Here is a basic usage:

    import React, { useState } from 'react';
    
    import EdiText from 'react-editext';
    
    function Example(props) {
      const [value, setValue] = useState('What is real? How do you define real?');
    
      const handleSave = (val) => {
        console.log('Edited Value -> ', val);
        setValue(val);
      };
      return (
        <div className="container">
          <EdiText type="text" value={value} onSave={handleSave} />
        </div>
      );
    }
    

    There is also a codesandbox template that you can fork and play with it:

    Edit react-editext-template

    You can customize almost everything based on your needs. Please navigate to Props section. I mean, just scroll down.

    Props

    Prop Type Required Default Note
    value string Yes Value of the content and input [in edit mode]
    onSave function Yes Function will be called when save button clicked. value and inputProps are passed to cb.
    type string No text Input type. Possible options are: text, password, number, email, textarea, date, datetime-local, time, month, url, week, tel
    hint node No '' A simple hint message appears at the bottom of input element. Any valid element is allowed.
    inputProps object No Props to be passed to input element. Any kind of valid DOM attributes are welcome.
    viewProps object No Props to be passed to div element that shows the text. You can specify your own styles or className
    containerProps object No Props to be passed to div element that is container for all elements. You can use this if you want to style or select the whole container.
    editButtonProps object No Props to be passed to edit button.
    validation function No Pass your own validation function. takes one param -> value. It must return true or false
    validationMessage node No Invalid Value If validation fails this message will appear
    onValidationFail function No Pass your own function to track when validation failed. See Examples page for the usage.
    onCancel function No Function will be called when editing is cancelled. value and inputProps are passed as params.
    saveButtonContent node No '' Content for save button. Any valid element is allowed. Default is: ✓
    cancelButtonContent node No '' Content for cancel button. Any valid element is allowed. Default is: ✕
    editButtonContent node No '' Content for edit button. Any valid element is allowed. Default is: ✎
    saveButtonClassName string No Custom class name for save button.
    cancelButtonClassName string No Custom class name for cancel button.
    editButtonClassName string No Custom class name for edit button.
    viewContainerClassName string No Custom class name for the container in view mode.See here
    editContainerClassName string No Custom class name for the container in edit mode. Will be set to viewContainerClassName if you set it and omit this. See here
    mainContainerClassName string No deprecated. Custom class name for the top-level main container. See here
    hideIcons bool No false Set it to true if you don't want to see default icons on action buttons. See Examples page for more details.
    buttonsAlign string No after Set this to before if you want to locate action buttons before the input instead of after it. See here.
    editOnViewClick bool No false Set it to true if you want clicking on the view to activate the editor.
    editing bool No false Set it to true if you want the view state to be edit mode.
    onEditingStart function No Function that will be called when the editing mode is active. See here
    showButtonsOnHover bool No false Set it to true if you want to display action buttons only when the text hovered by the user. See here
    submitOnEnter bool No false Set it to true if you want to submit the form when Enter is pressed. Be careful if you have multiple instances of <EdiText/> on the same page.
    cancelOnEscape bool No false Set it to true if you want to cancel the form when Escape is pressed. See here
    cancelOnUnfocus bool No false Set it to true if you want to cancel the form when clicked outside of the input. See here
    submitOnUnfocus bool No false Set it to true if you want to submit the form when clicked outside of the input. See here
    startEditingOnFocus bool No false Activates the edit mode when the view container is in focus. See here
    startEditingOnEnter bool No false Activates the edit mode when the Enter key is pressed. See here
    tabIndex number No An helper shortcut in case you want to pass the same tabIndex to both viewProps and inputProps.
    renderValue function No Custom render method for the content in the view mode.Use this prop to customize the displayed value in view mode. See here
    canEdit function or boolean No true A function or boolean prop that returns a boolean. If it returns true the input will be editable. If it returns false the input will be read-only.

    Styling with styled-components

    You can style your <EdiText/> components with styled-components or similar libraries. You can either target internal HTML elements by their type ( or order) , or you can select them by attribute values.

    Each customizable HTML element has a editext=xxx attribute. Use below as a reference table:

    Attr. Value Description
    main-container the main container
    view-container the container in view mode
    edit-container the container in edit mode
    button-container the container for the save and cancel buttons
    validation-container the container for validation message area
    edit-button use this to style the edit button
    save-button use this to style the save button
    cancel-button use this to style the cancel button
    input There is only one input. You can select it directly or just use this attr value.
    hint To style the hint container.

    Usage:

    button[editext='cancel-button'] {
      &:hover {
        background: crimson;
        color: #fff;
      }
    }
    
    div[editext='view-container'] {
      background: #6293c3;
      padding: 15px;
      border-radius: 5px;
      color: #fff;
    }
    
    div[editext='validation-container'] {
      color: #d3d3d3;
      text-decoration: underline;
    }
    
    input,
    textarea {
      /** or input[editext="input"] {} */
      background: #1d2225;
      color: #f4c361;
      font-weight: bold;
      border-radius: 5px;
    }
    

    See the example code.

    Browser Support

    Chrome
    Chrome
    Firefox
    Firefox
    Safari
    Safari
    iOS Safari
    iOS Safari
    Opera
    Opera
    IE / Edge
    Edge
    :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark: :white_check_mark:

    Development

    With Nix

    nix-shell --pure
    develop
    

    This will start a tmux session for both library and example app.

    Without Nix

    Install dependencies and start the rollup watch process.

    yarn install
    yarn start
    

    Navigate to example/ folder and repeat the above steps.

    cd example
    yarn install
    yarn start
    

    Now open http://localhost:3000/ in your browser.

    Contributors ✨

    Thanks goes to these wonderful people (emoji key):

    jdoklovic
    jdoklovic

    πŸ’»
    Obed Castillo
    Obed Castillo

    πŸ’»
    Bruno Aderaldo
    Bruno Aderaldo

    πŸ› πŸ’»
    Sascha Kiefer
    Sascha Kiefer

    πŸ’¬ πŸ€”
    Ehab Alsharif
    Ehab Alsharif

    πŸ’» πŸ“–
    Harsha N Hegde
    Harsha N Hegde

    πŸ› πŸ’»
    Justin Kuntz
    Justin Kuntz

    πŸ€” πŸ›
    Braulio Soncco
    Braulio Soncco

    πŸ€”
    zig
    zig

    πŸ›
    Isaiah Taylor
    Isaiah Taylor

    πŸ€”
    anz000
    anz000

    πŸ€”
    Amir M
    Amir M

    πŸ€”
    Harshil Parmar
    Harshil Parmar

    πŸ“–
    Brandon Paris
    Brandon Paris

    πŸ›
    Christopher Schaub
    Christopher Schaub

    πŸ€”
    Krzysztof Danek
    Krzysztof Danek

    πŸ›
    Pavel Kalashnikov
    Pavel Kalashnikov

    πŸ›
    JÑn Bočínec
    JÑn Bočínec

    πŸ›
    shubh057
    shubh057

    πŸ€”
    Sachin Jain
    Sachin Jain

    πŸ›
    SeYeD Sina
    SeYeD Sina

    πŸ€”

    This project follows the all-contributors specification. Contributions of any kind welcome!

    License

    MIT Β© alioguzhan

    Show All