# react-material-tile

> A react component that transforms from a custom 'tile' to a Material UI Card

Latest version **0.0.7** (published 2017-02-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-material-tile
pnpm add react-material-tile
yarn add react-material-tile
bun add react-material-tile
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2017-02-10 |
| First published | 2017-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Kayla Fitzsimmons |
| Maintainers | kfitzi |

## Links

- npm: https://www.npmjs.com/package/react-material-tile
- Repository: https://github.com/fitzk/react-tile
- Homepage: https://github.com/fitzk/react-tile#readme
- Issues: https://github.com/fitzk/react-tile/issues
- npm.io page: https://npm.io/package/react-material-tile

## Dependencies (2)

- [styled-flex](https://npm.io/package/styled-flex.md) ^0.1.0
- [react-responsive](https://npm.io/package/react-responsive.md) ^1.2.6

## Recent versions

- 0.0.7 (latest) — 2017-02-10
- 0.0.6 — 2017-02-09
- 0.0.5 — 2017-02-06
- 0.0.4 — 2017-02-06
- 0.0.3 — 2017-02-04
- 0.0.2 — 2017-02-04
- 0.0.1 — 2017-02-03

## README

## React Material Tile

🚧 This project is a work in progress, components are subject to change.

React Material Tile components were created to make Material Grid layouts easier.
These components were designed for use with [React Material UI](https://github.com/callemall/material-ui),
but they also work as stand alone components.

### NPM
```
npm install --save react-material-tile
```
### Components

#### MaterialTile
Displays an image, which transforms into a React Material UI card on click. Tile / card behavior is handled by default.

##### Usage
```
import MaterialTile from "react-material-tile"
...

	<MaterialTile src={ image.png }
		      title="React Tile Card"
		      noImageInHeader 			// don't show image in card header
		      tileWidth="250px"
		      tileHeight="250px">
		<CardText>
			Content here
		</CardText>
	</MaterialTile>
```

##### Options

| prop name       | type | optional/required | description  |
| :------------- |:---------| :--------|:-------------------|
| children | any | required | child components components, props are passed to children from MaterialTile |
| tileWidth | string | optional|set width for Tile component|
| tileHeight |string| optional| set height for Tile component|
| CustomCard | any | optional | a custom card if you do not want to use the default Card ( React Material UI Card Component ) or if you are using these components without React Material UI |
| noImageInHeader | boolean | optional | set set to true if you do not want the image from your tile displayed in left hand corner of card header, *default is false* |
| name |string | optional | a unique identifier to assign to a tile for handling flex-box order, multiple controlled tiles, or state by uri |
| src | string | required (if not using a custom avatar)| string for path to image for your avatar, right now the component only supports standard image formats, for svg add a custom avatar until this use case is supported |
| title |string| optional | title  shown in card header |
| subtitle |string| optional | subtitle shown in card header |
| initiallyExpanded | boolean | optional | set card state to open immediately after mount |



#### MaterialTileCard
```
import { MaterialTileCard } from "react-material-tile"
```
Stateless Material Tile component.

| prop name       | type | optional/required | description  |
| :-------------: |:---------:| :--------:|:-------------------|
| onClick | function | required | a function to control tile also applied to header of default Card |

#### MaterialTileGrid
```
import { MaterialTileGrid } from "react-material-tile"
```
🚧 This component is in progress.


| prop name       | type | optional/required | description  |
| :-------------: |:---------:| :--------:|:-------------------|
| row | boolean | optional | specify if cards should be organized in a row, column is default |
🚧 documentation: in progress

#### MaterialTileRouted

🚧 This component is in progress and is not currently distributed as part of this package. Allows you to use your uri to determine open / closed state of tiles. It checks the url for a component's name and whether or not it is active, it also works with nested tiles.


### Use with React Material UI or with a custom theme
Theming is optional, however, if you do decide to use a theme,
you can pass it to all Material Tile components by using the
ThemeProvider supplied by Styled components.

```
import React, { Component } from "react"
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider"
import getMuiTheme from "material-ui/styles/getMuiTheme"
import lightBaseTheme from "material-ui/styles/baseThemes/lightBaseTheme"
import { ThemeProvider } from "styled-components"

export class App extends Component {

	render() {
	    return <MuiThemeProvider muiTheme={ getMuiTheme(lightBaseTheme) }>
		     <ThemeProvider theme={ lightBaseTheme }>
		     	...
		     </ThemeProvider>	     
		   </MuiThemeProvider>
       }
}	     
```
### Use without React Material UI
🚧 documentation: in progress  
To use MaterialTile components without React Material UI, you would
just need to supply your own custom Card to MaterialTile or MaterialTileFunctional.

### Live Example
[kfitzi.io](https://kfitzi.io/projects)

---
_Source: https://npm.io/package/react-material-tile · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._