Legend

Displays the meaning of a set of colors.

---

❇ 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

❓ How to use

1. Install the component

$ npm install --save @wniemiec-component-reactnative/legend

2. Import the component

import Legend from '@wniemiec-component-reactnative/legend';

3. 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' }}>
  <Legend 
	mapping={legendMapping}
	fgColor='#333333'
  />
</View>

[...]

📖 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