Displays the meaning of a set of colors.

Usage no npm install needed!

<script type="module">
  import wniemiecComponentReactnativeLegend from 'https://cdn.skypack.dev/@wniemiec-component-reactnative/legend';



Displays the meaning of a set of colors.

React Native compatibility Release License

❇ Introduction

React Native component that that displays a color mapping, with the color next to its meaning. Useful to complement graphics or component that use different colors to represent something.

🖼 Gallery

image 2 image 3

❓ How to use

  1. Install the component
$ npm install --save @wniemiec-component-reactnative/legend
  1. Import the component
import Legend from '@wniemiec-component-reactnative/legend';
  1. Use it

import React, { useState } from 'react';
import { View } from 'react';


const legendMapping = [
  {color: 'red', label: 'Label 1'},
  {color: 'purple', label: 'Label 2'},
  {color: 'green', label: 'Label 3'},
  {color: 'blue', label: 'Label 4'},
  {color: 'orange', label: 'Label 5'},
  {color: 'yellow', label: 'Label 6'},
  {color: 'black', label: 'Label 7'},


<View style={{ display: 'flex', flex: 1, justifyContent: 'center', alignItems: 'center' }}>


📖 Documentation

Property Type Description Default
mapping array: object Mapping containing the meaning (label) of each color [{color: '', label: ''}]
fgColor string Text color "#555555"

🚩 Changelog

Details about each version are documented in the releases section.

🤝 Contribute!

See the documentation on how you can contribute to the project here.

📁 Files


Name Type Description
docs Directory Documentation files
src Directory Source files