https://github.com/danilo-89/react-radio-pie

Customizable accessible radio button elements in a circular layout suitable for pie chart visualization in React.
https://github.com/danilo-89/react-radio-pie

buttons pie-chart piechart radio radio-buttons react

Last synced: 3 months ago
JSON representation

Customizable accessible radio button elements in a circular layout suitable for pie chart visualization in React.

• Host: GitHub
• URL: https://github.com/danilo-89/react-radio-pie
• Owner: danilo-89
• License: mit
• Created: 2023-06-29T13:14:56.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-06-30T14:22:40.000Z (about 3 years ago)
• Last Synced: 2025-03-06T11:47:02.617Z (over 1 year ago)
• Topics: buttons, pie-chart, piechart, radio, radio-buttons, react
• Language: TypeScript
• Homepage: https://react-radio-pie.vercel.app
• Size: 443 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React Radio Pie (react-radio-pie)

![](src/stories/assets/cover.png)

[![npm version](https://badge.fury.io/js/react-radio-pie.svg)](//npmjs.com/package/react-radio-pie)

Customizable accessible radio button elements in a circular layout suitable for pie chart visualization in React.

## Installation

#### yarn

```

yarn add react-radio-pie

```

#### npm

```

npm install react-radio-pie

```

#### pnpm

```

pnpm install react-radio-pie

```

## Basic example

```javascript

import ReactRadioPie, {

	ReactRadioPieProvider,

	ReactRadioPieCSS,

} from 'react-radio-pie';

// load css file

ReactRadioPieCSS();

const choices = [

	{

		id: 'f21a4d9c',

		content: 'Never',

	},

	{

		id: '37e1dfe9',

		content: 'Rarely (once a month or less)',

	},

	{

		id: '9dcbf383',

		content: 'Occasionally (a few times a month)',

	},

	{

		id: 'a550db7f',

		content: 'Sometimes (once a week or so)',

	},

	{

		id: '3d6bba3a',

		content: 'Often (a few times a week)',

	},

	{

		id: '2b2d3b03',

		content: 'Very often (almost every day)',

	},

];

export default function App() {

	return (

		

			

		

	);

}

```

## More examples

[Storybook](https://react-radio-pie.vercel.app/?path=/docs/introduction--docs)

## License

MIT