README.md

@newamerica/components

A collection of user interface components that are helpful for complicated data visualizations.

Installation

npm install @newamerica/components --save

Components

• ButtonGroup
• CheckboxGroup
• Search
• Select
• Slider
• Toggle

API

ButtonGroup

From ./src/ButtonGroup/index.js

prop	type	default	required	description
active	Union<String | Number>		❌
onChange	Function		✅	This function will receive the currently selected button's id
options	Array[]<Shape>		✅
options[].id	Union<String | Number>		❌
options[].text	String		❌

CheckboxGroup

From ./src/CheckboxGroup/index.js

prop	type	default	required	description
onChange	Function		✅	This function will receive an object with all checkbox values.
options	Array[]<Shape>		✅
options[].checked	Boolean		❌
options[].id	Union<String | Number>		❌
options[].label	String		❌
orientation	Enum("vertical","horizontal")	"vertical"	❌
selectButtons	Boolean	false	❌	If true, adds buttons that let the user select and deselect all checkboxes at once.
style	Object		❌
title	String		❌

Search

From ./src/Search/index.js

prop	type	default	required	description
className	String		❌
onChange	Function		✅	This function will receive the current value of the search box
placeholder	String		❌
style	Object		❌

Select

From ./src/Select/index.js

prop	type	default	required	description
className	String		❌
onChange	Function		✅	This function will receive the current value of the select dropdown.
options	Array[]<String>		✅
selected	String		❌

Slider

From ./src/Slider/index.js

prop	type	default	required	description
id	String		❌
label	String		✅
max	Number		✅
min	Number		✅
onChange	Function		✅	This function will receive the entire event when the slider has changed. Use event.target.value to get the current slider value.
step	Number		❌

Toggle

From ./src/Toggle/index.js

prop	type	default	required	description
checked	Boolean	false	❌
id	String		❌
offLabel	String		✅
onChange	Function		✅	This function will receive a boolean value for whether or not the toggle is on/off.
onLabel	String		✅