react-remountable
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.9 • Public • Published

    react-remountable

    NPM

    language license npm version

    • provides an API remount as prop for re-mounting component
    • resets stateful component to initial state
    • just use it like using the ReactComponent::forceUpdate API
    • re-calls phases: componentWillUnmount -> constructor -> static getDerivedStateFromProps(v16.3+) -> render -> collect refs -> componentDidMount

    Why

    We may need:

    • Refresh a component locally
    • Discard the mutated state data
    • Trigger some component life-cycle hooks

    Installation

    yarn add react-remountable
    

    or

    npm install -s react-remountable
    

    Example:

    import remountable from 'react-remountable'
    import { StatefulForm1, StatefulForm2, StatefulForm3 } from './Forms'
     
    @remountable  // decorator syntax
    export default class Dashboard extends React.Component {
        state = { greeting: '', whatsUp: '' }
     
        focusRef = (ref) => ref && ref.focus()
     
        handleWhatsUpChange = (e) => {
            this.setState({ whatsUp: e.target.value })
        }
     
        handleReset = () => {
            // 1. send log
            // 2. re-render/refresh Dashboard component and its stateful children components
            // 3. auto focus on the text input
            // 4. fetch today's greeting and render it
            this.props.remount()
        }
     
        async componentDidMount () {
            const { greeting } = await fetch('api.example.com/greeting').then(response.json())
            this.setState({ greeting })
        }
     
        render () {
            return (
                <div>
                    <h1>{this.state.greeting}</h1>
                    <StatefulForm1 />
                    <StatefulForm2 />
                    <StatefulForm3 />
                    <input onChange={this.handleWhatsUpChange} ref={this.focusRef} />
                    <button onClick={this.handleReset}>Reset</button>
                </div>
            )
        }
     
        componentWillUnmount () {
            fetch('api.example.com/log', { method: 'POST', body: JSON.stringify({ action: 'reset'}) })
        }
    }

    If the ESNext decorator syntax is not enabled:

    export default remountable(Dashboard)

    Enjoy it!

    Install

    npm i react-remountable

    DownloadsWeekly Downloads

    6

    Version

    1.0.9

    License

    MIT

    Unpacked Size

    18.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • zheeeng