https://github.com/chrisblossom/react-safe-universal-inputs

Fixes a React race condition when using controlled inputs combined with server-side rendering
https://github.com/chrisblossom/react-safe-universal-inputs

forms isomorphic react universal

Last synced: 3 months ago
JSON representation

Fixes a React race condition when using controlled inputs combined with server-side rendering

• Host: GitHub
• URL: https://github.com/chrisblossom/react-safe-universal-inputs
• Owner: chrisblossom
• Created: 2017-05-22T00:26:30.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-11-14T17:45:39.000Z (about 7 years ago)
• Last Synced: 2024-10-10T17:30:51.672Z (3 months ago)
• Topics: forms, isomorphic, react, universal
• Language: JavaScript
• Homepage: https://react-safe-universal-inputs.herokuapp.com
• Size: 195 KB
• Stars: 10
• Watchers: 2
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# react-safe-universal-inputs

This module fixes a race condition when using controlled inputs combined with server-side rendering. If an input is changed before React is loaded, the change will not be registered.

Related issues: [#2585](https://github.com/facebook/react/issues/2585) [#4293](https://github.com/facebook/react/issues/4293)

Demo: [https://react-safe-universal-inputs.herokuapp.com](https://react-safe-universal-inputs.herokuapp.com)

Usage:

``yarn add react-safe-universal-inputs`` or ``npm install --save react-safe-universal-inputs``

Optionally pass a function to ``onEarlyInput`` that handles a changed node, otherwise ``onChange`` is called. 

Called once with ``componentDidMount`` and is only called if the value has changed before the initial react render.

```jsx

import React, { Component } from 'react';

import { Input, Select } from 'react-safe-universal-inputs';

export default class Example extends Component {

    constructor() {

        super();

        

        this.state = {

            text: 'initial text',

            select: 'yes',

        };

        

        this.handleEarlyInput = this.handleEarlyInput.bind(this);

        this.handleChange = this.handleChange.bind(this);

    }

    

    handleEarlyInput(inputNode) {

        const value = inputNode.value;

        

        this.setState(() => {

            return {

                [inputNode.name]: value,

            }

        });

    }

    

    handleChange(event) {

        event.preventDefault();

        

        const type = event.target.type;

        const name = event.target.name;

        this.setState(() => {

            return {

                [name]: value,

            };

        });

    }

    

    render() {

        return (

            

                

                

                

                    yes

                    no

                

            

        );

    }

}

```

See the ``/example/`` folder / demo for more examples.

## Known Issues:

1. ref is not accessible.

2. ``