359 |
360 | {`react-toggle-button`}
361 |
362 |
363 | {`A highly customizable and portable toggle button for React.`}
364 |
365 |
366 | {`// Easy to install and works out-of-the-box
367 |
368 | // Change a few things, or change everything
369 |
370 | // Uses react-motion for animating toggle.
371 |
372 | // Animates hover states too!
373 |
374 | // Quacks like an checkbox, if that's your thing.
375 |
376 | // Sticks to the UI stuff (Redux approved!)
377 | `}
378 |
379 |
Install
380 |
381 | {`npm install react-toggle-button`}
382 |
383 |
384 | {`//ES6
385 | import ToggleButton from 'react-toggle-button'
386 |
387 | //ES5
388 | var ToggleButton = require('react-toggle-button')`}
389 |
390 |
Examples
391 | {codeExamples.map((example, i) => {
392 | return makeBlock(this, example, i)
393 | })}
394 |
395 |
React Toggle Button API
396 |
397 | {`import ToggleButton from 'react-toggle-button'
398 |
399 | /**
400 | * 'react-toggle-button' PropTypes
401 | */
402 | ToggleButton.propTypes = {
403 | //
404 | //
405 | // REQUIRED PROPS
406 | //
407 | //
408 |
409 | value: React.PropTypes.bool.isRequired,
410 | /**
411 | * Called during onClick
412 | * 1. triggers 'focus' and 'click' on internal checkbox
413 | * 2. calls onToggle(this.props.active)
414 | */
415 | onToggle: React.PropTypes.func.isRequired,
416 |
417 | //
418 | //
419 | // OPTIONAL PROPS
420 | //
421 | //
422 | /**
423 | * Object with four properties { active, inactive, activeThumb, inactiveThumb }
424 | *
425 | * each property should have a 'base' key and a 'hover' key
426 | * ( if hover is undefined, that property will use the base value )
427 | *
428 | */
429 | colors: React.PropTypes.object,
430 |
431 |
432 | /**
433 | * The label used inside the track, can also take a component
434 | *
435 | * activeLabel (defaultValue: 'ON')
436 | * inactiveLabel (defaultValue: 'OFF')
437 | */
438 | activeLabel: React.PropTypes.oneOfType([
439 | React.PropTypes.string,
440 | React.PropTypes.object,
441 | ]),
442 | inactiveLabel: React.PropTypes.oneOfType([
443 | React.PropTypes.string,
444 | React.PropTypes.object,
445 | ]),
446 |
447 |
448 | /**
449 | * These props specify style,
450 | * hover style is used during mouseOver event
451 | *
452 | *
453 | */
454 | activeLabelStyle: React.PropTypes.object,
455 | activeLabelStyleHover: React.PropTypes.object,
456 | activeThumbStyle: React.PropTypes.object,
457 | activeThumbStyleHover: React.PropTypes.object,
458 | inactiveLabelStyle: React.PropTypes.object,
459 | inactiveLabelStyleHover: React.PropTypes.object,
460 | thumbStyle: React.PropTypes.object,
461 | thumbStyleHover: React.PropTypes.object,
462 | trackStyle: React.PropTypes.object,
463 | trackStyleHover: React.PropTypes.object,
464 |
465 |
466 | /**
467 | * These props take a function that receives a real number [0, 1] and
468 | * returns an interpolated style.
469 | *
470 | * No Hover -> Hover : 0 -> 1 : No Toggle -> Toggle
471 | */
472 | animateThumbStyleHover: React.PropTypes.func,
473 | animateTrackStyleHover: React.PropTypes.func,
474 | animateTrackStyleToggle: React.PropTypes.func,
475 | animateThumbStyleToggle: React.PropTypes.func,
476 |
477 |
478 | /**
479 | * passes through internal spring settings for react-motion
480 | * { stiffness, damping }
481 | */
482 | internalSpringSetting: React.PropTypes.object,
483 | internalHoverSpringSetting: React.PropTypes.object,
484 |
485 |
486 | /**
487 | * Optional if one wants an icon inside the thumb, take a string or component
488 | */
489 | thumbIcon: React.PropTypes.oneOfType([
490 | React.PropTypes.string,
491 | React.PropTypes.object,
492 | ]),
493 |
494 | /**
495 | * The range to move the thumb on toggle [starting, ending]
496 | */
497 | thumbAnimateRange: React.PropTypes.array,
498 |
499 | /**
500 | * If you want to put some props on the underlying element
501 | * you can pass them through this prop.
502 | *
503 | * Example:
504 | *
505 | * passThroughInputProps={{
506 | * onChange: () => console.log('Hello!')
507 | * }}
508 | *
509 | */
510 | passThroughInputProps: React.PropTypes.object,
511 |
512 | }`}
513 |
514 |