react-editext

v3.17.1

Editable Text Component for React Applications

NPM

README

GitHub

Website

MIT

Latest version published 4 months ago

    npm install react-editext

We couldn't find any similar packages Browse all packages

Package Health Score

68 / 100

Popularity
Small
Maintenance
Healthy
Security
No known security issues
Community
Sustainable

Make sure the open source you're using is safe to use

Secure my Project

Popularity

Small

Weekly Downloads (1,670)

Dependents: 0
GitHub Stars: 193
Forks: 27
Contributors: 8

The npm package react-editext receives a total of 1,670 downloads a week. As such, we scored react-editext popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package react-editext, we found that it has been starred 193 times, and that 0 other projects in the ecosystem are dependent on it.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Security

No known security issues

Security and license risk for significant versions

All Versions

Direct Vulnerabilities

1.1.0

1.2.1

2.1.2

3.16.1

3.17.1

Indirect Vulnerabilities

1.1.0

1.2.1

2.1.2

3.16.1

3.17.1

License Risks

1.1.0

1.2.1

2.1.2

3.16.1

3.17.1

All security vulnerabilities belong to production dependencies of direct and indirect packages.

License

MIT

Security Policy

We found a way for you to contribute to the project! Looks like react-editext is missing a security policy.

You can connect your project's repository to Snyk to stay up to date on security alerts and receive automatic fix pull requests.

We found a way for you to contribute to the project! Looks like react-editext is missing a security policy.

    # Install the Snyk CLI and test your project
npm i snyk && snyk test react-editext

Keep your project free of vulnerabilities with Snyk

Maintenance

Healthy

Commit Frequency

Open Issues: 1
Merged PR: 68
Open PR: 1
Last Commit: 2 months ago

Further analysis of the maintenance status of react-editext based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that react-editext demonstrates a positive version release cadence with at least one new version released in the past 12 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Community

Sustainable

Readme.md: No
Contributing.md: No
Code of Conduct: Yes
Contributors: 8
Funding: Yes

This project has seen only 10 or less contributors.

How about a good first contribution to this project? It seems that react-editext is missing a README file.

Embed Package Health Score Badge

Package

Node.js Compatibility: >=8

Age: 2 years
Dependencies: 0 Direct / 0 Total
Versions: 46
Install Size: 175 kB
Dist-tags: 1
# of Files: 16
Maintainers: 1
TS Typings: Yes

react-editext has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

react-editext

Editable Text Component for React Applications

Covid-19

Icons are provided for free by Icon Finder for coronavirus awareness.

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:

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]
type	string	Yes	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.
onSave	function	Yes		Function will be called when save button clicked. `value` and `inputProps` are passed to cb.
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`
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		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`.

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
`view-container`	the container in `view` mode
`edit-container`	the container in `edit` mode
`button-container`	the container for the `save` and `cancel` buttons
`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;
  }

  input, textarea { /** or input[editext="input"] {} */
    background: #1D2225;
    color: #F4C361;
    font-weight: bold;
    border-radius: 5px;
  }

See the example code.

Browser Support

Chrome	Firefox	Safari	iOS Safari	Opera	IE / Edge
✅	✅	✅	✅	✅	✅ ❗

rows prop for textarea has no effect in IE/Edge. You can set its height with some css.

Contributors ✨

Thanks goes to these wonderful people (emoji key):

_alioguzhan 💻 📖	_jdoklovic 💻	_{Obed Castillo} 💻	_{Bruno Aderaldo} 🐛 💻	_{Sascha Kiefer} 💬 🤔	_{Ehab Alsharif} 💻 📖	_{Harsha N Hegde} 🐛 💻
_{Justin Kuntz} 🤔 🐛	_{Braulio Soncco} 🤔	_zig 🐛	_{Isaiah Taylor} 🤔	_anz000 🤔	_{Amir M} 🤔	_{Harshil Parmar} 📖

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

License

react-editext versions

Dist-Tags for react-editext

latest

Version	Published	Tag	Node.js Compatability	Licenses	Dependencies	Direct Vulnerabilities	Publisher
3.17.1	14 September 2020	latest	>=8	MIT	0	0 H 0 M 0 L	ali_oguzhan
3.16.1	15 July 2020		>=8	MIT	0	0 H 0 M 0 L	ali_oguzhan
2.1.2	07 October 2018		>=8	MIT	1	0 H 0 M 0 L	ali_oguzhan
All Versions

Last updated on 18 January-2021, at 02:43 (UTC).

react-editext

Editable Text Component for React Applications

Package Health Score

Popularity

Security

Security and license risk for significant versions

Version

Release Date

Direct Vulnerabilities

Indirect Vulnerabilities

License Risks

Maintenance

Community

Embed Package Health Score Badge

Package

react-editext

Covid-19

Install

Usage

Props

Styling with `styled-components`

Browser Support

Contributors ✨

License

react-editext versions

react-editext dependencies

Package Health Score

Security and license risk for significant versions

Version

Release Date

Direct Vulnerabilities

Indirect Vulnerabilities

License Risks

Embed Package Health Score Badge

react-editext

Covid-19

Install

Usage

Props

Styling with styled-components

Browser Support

Contributors ✨

License

react-editext versions

react-editext dependencies

Styling with `styled-components`