react-tile
Disclaimer: This component is work in progress. Dreamcode can be found in DREAMCODE.md. Unit tests are coming.
Usage
Installation: npm install -S react-tile
.
Consume using ES6 modules (and browserify):
const React = import Tile from 'react-tile' React
Consume using only browserify (no ES6, no JSX):
var React = var Tile = Tile
API
This module exports three components:
Most likely you only want to use Tile
- buy hey, modularity!
Tile
The Tile
component is very flexible and allows you to manipulate its rendering using these props:
width
: define the width of the tilecolor
: set text colorSquareBox
's contentlineHeight
: set css lineHeight property forSquareBox
bg
: provide the background forSquareBox
as React ElementbackgroundImage
: set backgroundImage css property forSquareBox
backgroundSize
: provide the backgroundSize forSquareBox
fontSize
: set fontSize ofSquareBox
fontFamily
: set fontFamily ofSquareBox
bar
: provide content for the bottom bar or disable itbarBackground
: provides background styles as a stringbarColor
: set text color ofTextCell
,
width
The width of the Tile
component also defines the length of a side of SquareBox
. It can be any CSS value as string. Default is "100%"
.
bg
The bg
prop is a React element which will be used as background for SquareBox
's content, if provided.
bar
The bar
prop can be a string (shorthand) or a React component used as content for TextCell
.
barBackground
The barBackground
prop provides the css background styles for the TextCell
.
Examples
This is somewhat pseudo-code, but provided the used React components, exist you should be able to do this.
Using a imaginary TimeRelative
component, that formats dates:
<Tile ="foo/bar/baz.png" ="Text inside square" =< => />
SquareBox
The SquareBox
component has the same width and height. It supports these props:
size
: Specifies the size of one side; default is"100%"
bg
: value for cssbg
property or React component to be used as background; see above for detailscolor
,lineHeight
,backgroundSize
,fontSize
,fontFamily
,backgroundImage
TextCell
The TextCell
component does not wrap text, hides overflowing elements and - if provided a string - will automatically cut off strings that are too long for the width of the tile, using an ellipsis. It supports these props:
truncating
: Truncate long text when if overflows; default is true
License
MIT License 2015 © David Pfahler and contributors