react-ratchet
React components for the Ratchet UI Library
Used to build Hacker News Mobile:
Documentation
Title
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var Title = Title;Component { return <Title>Hello World!</Title> }
NavBar
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var NavBar = NavBar;Component { return <NavBar> <Title>Hello World!</Title> </NavBar> ; }
NavButton
@prop [right] {Boolean} The side of the nav the button will be displayed
@prop [href] {String} If defined creates an anchor, else defaults to a button
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var NavButton = NavButton;Component { return <NavButton right href='./next'> Next </NavButton> ; }
TableView
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var TableView = TableView;var TableViewCell = TableViewCell;Component { return <TableView> <TableViewCell>My</TableViewCell> <TableViewCell>React</TableViewCell> <TableViewCell>Ratchet</TableViewCell> <TableViewCell>Table</TableViewCell> </TableView> ; }
TableViewCell
@prop [divider] {Boolean} Renders a divider cell
@prop [navigateRight] {Boolean} Right-wards chevron
@prop [navigateLeft] {Boolean} Left-wards chevron
@prop [href] {String} Assigns the given href to the child anchor
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var TableViewCell = TableViewCell;Component { return <TableViewCell>Hello World!</TableViewCell> }
Button
@prop [block] {Boolean} A block button
@prop [outlined] {Boolean} An outlined button
@prop [rStyle] {String} One of the btn-* CSS classes
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var Button = Button;Component { return <Button block rStyle='positive'>Hello World!</Button> }
Badge
@prop [inverted] {Boolean} An inverted badge
@prop [rStyle] {String} One of the badge-* CSS classes
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var Badge = Badge;Component { return <Badge rStyle='primary' inverted>42</Badge> }
Icon
@prop [...] {Boolean} Any defined boolean prop will be taken for the icon name
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var Icon = Icon;Component { return <Icon star-filled /> }
Toggle
@prop [active] {Boolean} Set the toggle to active
@prop [onToggle] {Function} Called when the toggle is toggled, with the new
active state as the only argument
@prop [className] {String} Merges with the Ratchet predefined CSS classes
Example:
var Toggle = Toggle;Component { superprops thisstate = active: false } { return <Toggle active=thisstateactive onToggle= this /> }