Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-edit-inplace
Advanced tools
Readme
This is a fork to the now unmaintained project react-inline-edit. Only minimal maintainance will be provided, and no new features will be accepted.
This is a simple React component for in-place text editing. It turns into an <input />
when focused, and tries to validate and save input on Enter or blur
. Esc works as well for cancelling.
Watch a demo, then check out demo/index.jsx for a quick example.
npm install --save react-edit-inplace
text
:string
initial textparamName
:string
name of the parameter to be returned to change
functionchange
:function
function to call when new text is changed and validated, it will receive {paramName: value}
className
:string CSS class nameactiveClassName
:string CSS class replacement for when in edit modevalidate
:function boolean function for custom validation, using this overrides the two props belowminLength
:number minimum text length, default 1
maxLength
:number maximum text length, default 256
editingElement
:string element name to use when in edit mode (DOM must have value
property) default input
staticElement
:string element name for displaying data default span
editing
:boolean If true, element will be in edit modetabIndex
:number tab index used for focusing with TAB key default 0
stopPropagation
:boolean If true, the event onClick will not be further propagated.import React from 'react';
import InlineEdit from 'react-edit-inplace';
class MyParentComponent extends React.Component {
constructor(props){
super(props);
this.dataChanged = this.dataChanged.bind(this);
this.state = {
message: 'ReactInline demo'
}
}
dataChanged(data) {
// data = { description: "New validated text comes here" }
// Update your model from here
console.log(data)
this.setState({...data})
}
customValidateText(text) {
return (text.length > 0 && text.length < 64);
}
render() {
return (<div>
<h2>{this.state.message}</h2>
<span>Edit me: </span>
<InlineEdit
validate={this.customValidateText}
activeClassName="editing"
text={this.state.message}
paramName="message"
change={this.dataChanged}
style={{
backgroundColor: 'yellow',
minWidth: 150,
display: 'inline-block',
margin: 0,
padding: 0,
fontSize: 15,
outline: 0,
border: 0
}}
/>
</div>)
}
}
FAQs
A simple inline text editor for React with ECMAScript 6 + JSX Harmony syntax
The npm package react-edit-inplace receives a total of 717 weekly downloads. As such, react-edit-inplace popularity was classified as not popular.
We found that react-edit-inplace demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.