Styling

react-easy-edit
Search…
Getting started
Props
Styling
To ensure that the library will not style any other elements on a page, all CSS classes are prefixed with`easy-edit-`.  If would like to style all EasyEdit components then you could overwrite all the default classes that the library provides
Viewing
All EasyEdit components are wrapped around a div with the class easy-edit-wrapper in it. If the component's allowEdit prop is set to false, then class easy-edit-not-allowed is added to the wrapper div which just changes the mouse cursor to 🚫 (not allowed). In case of hovering over it, the class easy-edit-hover-on is appended to it which changes the cursor to 👆 (pointer) and applies an italic style to the placeholder/value.
1
<!-- EasyEdit HTML in View mode -->
2
<div class="easy-edit-wrapper">Click to edit</div>
3
​
4
<!-- EasyEdit HTML in View mode while hovering over it -->
5
<div class="easy-edit-hover-on easy-edit-wrapper">Click to edit</div>
6
​
7
<!-- EasyEdit HTML in View mode when allowEdit is set to false -->
8
<div class="easy-edit-not-allowed easy-edit-wrapper">Can't edit me</div>
Copied!
Editing
Things become a bit more complicated in edit mode. As before, all EasyEdit components are wrapped around a div with the class easy-edit-inline-wrapper in it but this time, we have a few more containers.
1
<!-- EasyEdit HTML in Edit mode -->
2
<div class="easy-edit-inline-wrapper" tabindex="0">
3
  <div class="easy-edit-component-wrapper">
4
    <input type="text" placeholder="Click to edit" autocomplete="off" value="">
5
  </div>
6
  <div class="easy-edit-button-wrapper">
7
    <button class="easy-edit-button" name="save">Save</button>
8
    <button class="easy-edit-button" name="cancel">Cancel</button>
9
  </div>
10
  <div class="easy-edit-instructions">Click save to see what happens</div>
11
  <div class="easy-edit-validation-error">What just happened?</div>
12
</div>
Copied!
Component
Each component is wrapped around a div with the class easy-edit-component-wrapper.
Instructions
If provided, a div with the class easy-edit-instructions will be generated and placed within the main container. In not then no div container will be generated for instructions
Buttons
Both "Save" and "Cancel" buttons have a default class added to them which is easy-edit-button.
Validating
If validation fails on an EasyEdit component, then a validation message is shown back to the user which is wrapped around a div with the class easy-edit-validation-error. By default, the styling that's applied to the component just changes the font color to red.
Toggle edit mode for multiple components 🔥
Validation
Last modified 2yr ago
Copy link
Contents