48 | A dead-simple library to hash a string to a { backgroundColor, textColor } tuple from the official Material Design palette.
49 |
51 | Great for dynamically coloring your UI elements (badges, list icons, ..) with good-looking, vibrant colors and ensured text legibility. 52 |
53 | 54 |
55 |
56 | var toMaterialStyle = require('material-color-hash');
57 | // or, if you are on ES6:
58 | // import toMaterialStyle from 'material-color-hash'
59 |
60 | /* basic usage */
61 | var fooStyle = toMaterialStyle('foo');
62 | // fooStyle: {
63 | // backgroundColor: '#00BCD4',
64 | // color: 'rgba(0, 0, 0, 0.87)',
65 | // materialColorName: 'Cyan'
66 | // }
67 |
68 | /* select a different shade (default is 500) */
69 | var fooStyle200 = toMaterialStyle('foo', '200');
70 | // fooStyle200: {
71 | // backgroundColor: '#80DEEA',
72 | // color: 'rgba(0, 0, 0, 0.87)',
73 | // materialColorName: 'Cyan'
74 | // }
75 |
76 | var barStyle = toMaterialStyle('bar', 500);
77 | // barStyle: {
78 | // backgroundColor: '#2196F3',
79 | // color: 'rgba(255, 255, 255, 1)',
80 | // materialColorName: 'Blue'
81 | // }
82 |
83 | /* also works with emoji! */
84 | var emojiStyle = toMaterialStyle('😎');
85 | // emojiStyle: {
86 | // backgroundColor: '#FFEB3B',
87 | // color: 'rgba(0, 0, 0, 0.87)',
88 | // materialColorName: 'Yellow'
89 | // }
90 |
91 |
92 |
102 | The return object can be fed directly as a style prop to React components:
103 |
106 |
107 | import toMaterialStyle from 'material-color-hash';
108 |
109 | const MaterialBadge = (props) => {
110 | const style = toMaterialStyle(props.text);
111 |
112 | return (
113 | <div
114 | className="badge"
115 | style={style}
116 | >
117 | {props.text}
118 | </div>
119 | );
120 | }
121 |
122 |
123 |
124 | For more information about Material Design colors and how to use them, check out the official Material Design site by Google
125 | 126 |