Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/callstack/react-native-material-palette
Bringing Material Palette API to React Native
https://github.com/callstack/react-native-material-palette
material-design material-ui react react-native
Last synced: 3 months ago
JSON representation
Bringing Material Palette API to React Native
- Host: GitHub
- URL: https://github.com/callstack/react-native-material-palette
- Owner: callstack
- License: mit
- Created: 2017-06-05T12:43:41.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-28T13:47:09.000Z (over 6 years ago)
- Last Synced: 2024-05-23T08:03:02.827Z (6 months ago)
- Topics: material-design, material-ui, react, react-native
- Language: JavaScript
- Size: 1.47 MB
- Stars: 105
- Watchers: 8
- Forks: 11
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-react-native-native-modules - react-native-material-palette ★74
README
# react-native-material-palette
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![Version][version-badge]][package]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-welcome-badge]][prs-welcome]
[![Chat][chat-badge]][chat]
[![Code of Conduct][coc-badge]][coc]
[Android Palette API](https://developer.android.com/training/material/palette-colors.html) brought to react native. It extracts prominent colors from images to help you create visually engaging apps. At the moment it only supports Android.
Check out [this medium article](https://blog.callstack.io/colour-your-apps-in-react-native-using-material-palette-35448df91958) for a broader introduction!
## Installation
Installation and setup guide can be found here: [Setup guide](./docs/SETUP.md).
## Usage with `createMaterialPalette`
```js
import { createMaterialPalette } from "react-native-material-palette";
const palette = await createMaterialPalette({ uri: 'http://dummySite/images/yummy.jpg' });
```
## Usage with `MaterialPaletteProvider` and `withMaterialPalette`
```js
import { MaterialPaletteProvider, withMaterialPalette } from 'react-native-material-palette';
const PaletteView = withMaterialPalette(
palette => ({ backgroundColor: palette.vibrant.color }),
)(View);
// later ...
Hello World
```
## API
Full API documentation can be found here: [API documentation](./docs/API.md).
## Future work
- [ ] iOS support
- [ ] Providing own color profiles
## Example app
The repo includes an example app that covers all the API cases. Go [here](./example) to try it out!
## Development
Development instructions can be found here: [`react-native-material-palette` development](./docs/DEVELOPMENT.md).
[build-badge]: https://img.shields.io/circleci/project/github/callstack/react-native-material-palette/master.svg?style=flat-square
[build]: https://circleci.com/gh/callstack/react-native-material-palette
[coverage-badge]: https://img.shields.io/coveralls/github/callstack-io/react-native-material-palette.svg?style=flat-square
[coverage]: https://coveralls.io/github/callstack-io/react-native-material-palette?branch=master
[version-badge]: https://img.shields.io/npm/v/react-native-material-palette.svg?style=flat-square
[package]: https://www.npmjs.com/package/react-native-material-palette
[license-badge]: https://img.shields.io/npm/l/react-native-material-palette.svg?style=flat-square
[license]: https://opensource.org/licenses/MIT
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs-welcome]: http://makeapullrequest.com
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/callstack/react-native-material-palette/blob/master/CODE_OF_CONDUCT.md
[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=flat-square&colorB=758ED3
[chat]: https://discord.gg/zwR2Cdh