npm

@primitives/radio
TypeScript icon, indicating that this package has built-in type declarations

0.4.0 • Public • Published

Radio brings the equivalent of an <input type="radio" /> to Native land.

Handling changes

Context passes down a groupValue and a groupName together with a setGroupValue action to all its consumers. Both the value and the state are set by a useState hook within the consumer’s side, while groupName is a hardcoded string that marks the group name. And this is how the checked state is defined, since React Native does not offer a built-in solution similar to the radio input on Web.

Basic usage

import React, { useState } from 'react'
import { RadioGroup, RadioContext, RadioInput } from '@primitives/radio'
import PresentationComponent from './somewhere'

const RadioWrapper = ({
  groupName,
  isVisible = false,
  isDisabled = false
}) => {
  const [ groupValue, setGroupValue ] = useState('')

  return <RadioGroup
    groupName={groupName}
    groupValue={groupValue}
    onChange={setGroupValue}
  >
    <RadioInput
      value={value}
      isVisible={isVisible}
      isDisabled={isDisabled}
    />
    <RadioContext.Consumer>
      {({groupValue}) => (
        <PresentationComponent
          groupValue={groupValue}
        />
      )}
    </RadioContext.Consumer>
  </RadioGroup>
}

Readme

Keywords

none

Package Sidebar

Install

npm i @primitives/radio

Weekly Downloads

1

Version

0.4.0

License

MIT

Unpacked Size

27.5 kB

Total Files

28

Last publish

Collaborators

  • julia.spehrer
  • ijigg
  • psxcode
  • deepsweet
  • xaviervia
  • irminakacz
  • fosimus
  • atilaz
  • moria.am
  • gideon.gur