https://github.com/jsdf/react-ratchet
React components for the Ratchet mobile app UI library
https://github.com/jsdf/react-ratchet
Last synced: about 1 month ago
JSON representation
React components for the Ratchet mobile app UI library
- Host: GitHub
- URL: https://github.com/jsdf/react-ratchet
- Owner: jsdf
- License: mit
- Created: 2015-01-20T17:47:22.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2016-02-24T05:58:08.000Z (about 9 years ago)
- Last Synced: 2025-03-15T04:55:49.658Z (about 2 months ago)
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 86
- Watchers: 5
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-ratchet
React components for the [Ratchet](http://goratchet.com/components) UI Library
Used to build [Hacker News Mobile](http://hackernewsmobile.com/):
## Documentation
### Title
```
@prop [className] {String} Merges with the Ratchet predefined CSS classes
```
Example:
```javascript
var Title = require('react-ratchet').Title;
class MyTitle extends React.Component {
render() {
return Hello World!
}
}
```
### NavBar
```
@prop [className] {String} Merges with the Ratchet predefined CSS classes
```
Example:
```javascript
var NavBar = require('react-ratchet').NavBar;
class MyNavBar extends React.Component {
render() {
return (
Hello World!
);
}
}
```
### 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:
```javascript
var NavButton = require('react-ratchet').NavButton;
class MyNavButton extends React.Component {
render() {
return (
Next
);
}
}
```
### TableView
```
@prop [className] {String} Merges with the Ratchet predefined CSS classes
```
Example:
```javascript
var TableView = require('react-ratchet').TableView;
var TableViewCell = require('react-ratchet').TableViewCell;
class MyTableView extends React.Component {
render() {
return (
My
React
Ratchet
Table
);
}
}
```
### 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:
```javascript
var TableViewCell = require('react-ratchet').TableViewCell;
class MyTableViewCell extends React.Component {
render() {
return Hello World!
}
}
```
### 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:
```javascript
var Button = require('react-ratchet').Button;
class MyButton extends React.Component {
render() {
return Hello World!
}
}
```
### 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:
```javascript
var Badge = require('react-ratchet').Badge;
class MyBadge extends React.Component {
render() {
return 42
}
}
```
### 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:
```javascript
var Icon = require('react-ratchet').Icon;
class MyIcon extends React.Component {
render() {
return
}
}
```
### 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:
```javascript
var Toggle = require('react-ratchet').Toggle;
class MyToggle extends React.Component {
constructor(props) {
super(props)
this.state = {active: false}
}
render() {
return (
this.setState({active})}
/>
)
}
}
```