Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/trendmicro-frontend/react-radio-button

React Radio component
https://github.com/trendmicro-frontend/react-radio-button

Last synced: 4 months ago
JSON representation

React Radio component

Awesome Lists containing this project

README 

        
# react-radio [![build status](https://travis-ci.org/trendmicro-frontend/react-radio.svg?branch=master)](https://travis-ci.org/trendmicro-frontend/react-radio) [![Coverage Status](https://coveralls.io/repos/github/trendmicro-frontend/react-radio/badge.svg?branch=master)](https://coveralls.io/github/trendmicro-frontend/react-radio?branch=master)



[![NPM](https://nodei.co/npm/@trendmicro/react-radio.png?downloads=true&stars=true)](https://nodei.co/npm/@trendmicro/react-radio/)



React Radio



Demo: https://trendmicro-frontend.github.io/react-radio



## Installation



1. Install the latest version of [react](https://github.com/facebook/react) and [react-radio](https://github.com/trendmicro-frontend/react-radio):



  ```

  npm install --save react @trendmicro/react-radio

  ```



2. At this point you can import `@trendmicro/react-radio` and its styles in your application as follows:



  ```js

  import { RadioButton, RadioGroup } from '@trendmicro/react-radio';



  // Be sure to include styles at some point, probably during your bootstraping

  import '@trendmicro/react-radio/dist/react-radio.css';

  ```



## Usage



### RadioButton



```jsx

RadioButton label

```



You can use children to pass through the component.



```jsx



    

        Lorem ipsum dolor sit amet...

    



```



Or pass tag to customize the wrapper component.

```jsx



    Lorem ipsum dolor sit amet...



```



#### Uncontrolled RadioButton



```js

// Default checked



```



#### Controlled RadioButton



```js

// Checked



```



### RadioGroup



```jsx

 {

        const value = event.target.value;

        this.setState({ value: value });

    }}

>

    


        


            Batman (DC)

            Hulk (Marvel)

        


        


            Superman (DC)

            Spider-Man (Marvel)

        


    



```



## Prevent onChange Propagation



You may need to use `event.stopPropagation()` to stop **onChange** propagation when wrapping an input element inside the **RadioGroup** or **RadioButton** component.



```jsx

 {

        const value = event.target.value;

        this.setState({ value: value });

    }}

>

    

        First option

        


             {

                    // Prevent onChange propagation

                    event.stopPropagation();

                }}

            />

        


    

    

        Second option

        


             {

                    // Prevent onChange propagation

                    event.stopPropagation();

                }}

            />

        


    



```



## API



### Properties



#### RadioButton



Name | Type | Default | Description

:--- | :--- | :------ | :----------

children | any | | Children to pass through the component.

className | Object | | Customized class name for the component.

style | Object | | Customized style for the component.

checked | Boolean | | If true, the radio button will be selected. Transferred from the radio group.

defaultChecked | Boolean | | The default checked state of the radio button.

disabled | Boolean | false | If true, the radio button will be shown as disabled and cannot be modified.

tag | Function or String | label | Customized wrapper component to replace label.

id | String | | Id for the input field of radio button.

name | String | | Name for the input element.

value | any | | Value for the radio button.

onChange | Function | | Callback function that will be invoked when the value changes.



#### RadioGroup



Name | Type | Default | Description

:--- | :--- | :------ | :----------

children | any | | Children to pass through the component.

disabled | Boolean | false | If true, the radio group will be displayed as disabled.

name | String | | Name for the input element group.

value | any | | The value of the radio group.

defaultValue | any | | The default value of the radio group.

onChange | Function | | Callback function that will be invoked when the value changes.



### Class Properties



#### RadioButton



Use the ref property to get a reference to radio button:



```jsx

const ref = React.createRef();



```



## License



MIT