Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
react-input-message
Advanced tools
A small, completely unopinionated way, to display messages next to inputs based on events. Helpful for displaying input validation messages.
There is a frustrating trend in javascript form validation solutions that couple the view concerns of a form (hiding/showing of messages) with some specific data layer model, or abstraction. This often means that in order to use a form validator you also need to use a specifc js schema validator, or are tied into using a specifc validation library. react-input-message
strives to provide just a solution to quickly and easily annotating form controls without requiring that you use a specific validation or data schema library.
npm i -S jquense/react-input-message
You render your inputs as you normally would, except that you wrap them inside a MessageTrigger
component which will watch its child input for events.
render(){
var messages = {
name: ['name is required']
}
return (
<MessageContainer
messages={messages}
onValidationNeeded={handleValidationRequest}
>
<form>
<div>
<label>Name</label>
{/* the `events` prop tells the MessageContainer what
* events to trigger a `onValidationNeeded` handler for */}
<MessageTrigger for='name' events={[ 'onChange', 'onBlur']}>
<input type='text'
value={this.state.name}
onChange={handleChange}
/>
</MessageTrigger>
{/* A `Message` Component will display field specific
* messages (as provided by the `messages` prop) */}
<Message for='name'/>
</div>
{/* This `MessageTrigger` will trigger a `onValidationNeeded` event for the entire
* container, or just a specific group. Notice the lack of a `for` prop. */}
<MessageTrigger events={['onClick']}>
<button type='button'>Check</button>
</MessageTrigger>
</form>
</MessageContainer>
)
react-input-message
exports 3 simple components and a utility class:
MessageContainer
Props
onValidationNeeded
: a handler that fires for each MessageTrigger
component with a for
propmessages
: a hash of field names (for
prop values) and either a string, or an array of stringsMessageTrigger
A MessageTrigger is a commponent that listens to its child for events and triggers a validation event in the containing MessageContainer
. Generally this will be an input component.
props
for
: a field name or path. specifying a for
prop identifies the Trigger as "something that will need validation". Triggers that exclude a for
prop won't be the subject of an onValidation event themselves but can trigger validations for other triggers (via groups)group
: an arbitrary group name that allows inputs to be triggered together. If a for
prop is specified then the group
prop identifies the trigger as a member of that group. If the for
prop is excluded then the group
prop identifies which group to trigger validation for.activeClass
: a class to be added to the input if its field is currently activeevents
: default(['onChange']) an array of prop handlers that the MessageTrigger will list on, and trigger a onValidationNeeded
event in the ContainerLeaving the for
prop undefined
is a good way to create buttons that can trigger validation for a group (or the entire container), but will not be the subject of a validation itself.
Message
Displays the actual messages for a field, the default implementation just concats the messages together with ,
but you can easily create custom Message components with the connectToMessageContainer()
helper
connectToMessageContainer(componentClass)
in lieu of mixins you can use this helper function to wrap a component so that it passed the MessageContainer state as props. The following will be passed to your componentClass
as props:
messages
: will be for the specificed field (via the for
prop)active
: if you provide a for
prop this prop will be true or false based on whether there are any active messagesValidator(validationFn)
A very simple basic form validator class, to help manage input error state, use is completely optional. It is designed to nicely hook up to the MessageContainer
component without being tightly coupled to it.
validate(fields, [ context ])
returns a promise that resolves with the valid state of the field. You can validate multiple fields by passing an array. You can also pass in a context
object which will be passed to the validationFn
isValid
: checks if a field is currently in an error stateerrors([fields])
: return a hash of errors, you can pass this object directly to a MessageContainer
messages proplet model = { name: '' }
// you instantiate the object with a function that determines if a field is valid or not
let validator = new Validator(function(fieldName, context){
let isValid = !!context.model[fieldName]
if ( isValid === false)
return [ fieldName + ': is required!']
})
validator.validate('fieldName', { model: model })
.then(function(isValid){
//do something
})
validator.isValid('fieldName')
FAQs
unopinionated form input annotation
The npm package react-input-message receives a total of 106 weekly downloads. As such, react-input-message popularity was classified as not popular.
We found that react-input-message 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
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.