Skip to content

Instantly share code, notes, and snippets.

@ryanflorence

ryanflorence/foo.js

Last active May 15, 2019 16:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryanflorence/87489cfd6d4ea0ca183cf0d09167e2e4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryanflorence/87489cfd6d4ea0ca183cf0d09167e2e4 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ryanflorence revised this gist May 15, 2019. 1 changed file with 10 additions and 5 deletions.
    15 changes: 10 additions & 5 deletions foo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,22 +1,27 @@
    function RadioGroup({ onChange, name, children }) {
    const [state, inputProps] = useRadioGroup(name)
    return React.Children.map(children, child => {
    return React.cloneElement(child, inputProps)
    })
    return (
    <Context.Provider value={inputProps}>
    {children}
    </Context.Provider>
    )
    }

    function RadioInput(props) {
    const context = useContext(Context)
    return (
    <label>
    <input {...props} />
    <input {...props} {...context} />
    </label>
    )
    }

    function App() {
    return (
    <RadioGroup name="snack" onChange={handleChange}>
    <RadioInput label="Popcorn" value="pop-corn" />
    <div>
    <RadioInput label="Popcorn" value="pop-corn" />
    </div>
    <RadioInput label="Popcorn" value="pop-corn" />
    <RadioInput label="Popcorn" value="pop-corn" />
    </RadioGroup>
  2. ryanflorence created this gist May 15, 2019.
    24 changes: 24 additions & 0 deletions foo.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,24 @@
    function RadioGroup({ onChange, name, children }) {
    const [state, inputProps] = useRadioGroup(name)
    return React.Children.map(children, child => {
    return React.cloneElement(child, inputProps)
    })
    }

    function RadioInput(props) {
    return (
    <label>
    <input {...props} />
    </label>
    )
    }

    function App() {
    return (
    <RadioGroup name="snack" onChange={handleChange}>
    <RadioInput label="Popcorn" value="pop-corn" />
    <RadioInput label="Popcorn" value="pop-corn" />
    <RadioInput label="Popcorn" value="pop-corn" />
    </RadioGroup>
    )
    }