The latest articles on DEV Community by Wondermarin (@wondermarin). https://dev.to/wondermarin https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F622527%2F740d9abd-5e3e-42f1-8dd2-feddb17e242f.png https://dev.to/wondermarin en Wondermarin Wed, 18 Aug 2021 20:29:56 +0000 https://dev.to/wondermarin/react-color-palette-colorpicker-component-for-your-react-project-29ng https://dev.to/wondermarin/react-color-palette-colorpicker-component-for-your-react-project-29ng <h2> Hello everyone! </h2> <p>I would like to introduce you to my &lt;ColorPicker /&gt; component.<br> I will be glad of any feedback, have a nice day!</p> <p><strong><a href="https://github.com/Wondermarin/react-color-palette">GitHub Repo</a></strong><br> <strong><a href="https://rcp.wondermarin.space">Online Demo</a></strong></p> <h3> Features: </h3> <ul> <li>🚀 Lightweight</li> <li>💨 No dependencies</li> <li>🛡️ Strict</li> </ul> <h3> Installation </h3> <h4> npm </h4> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>npm <span class="nb">install </span>react-color-palette </code></pre> </div> <h4> yarn </h4> <div class="highlight js-code-highlight"> <pre class="highlight shell"><code>yarn add react-color-palette </code></pre> </div> <h3> Usage </h3> <div class="highlight js-code-highlight"> <pre class="highlight typescript"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">ColorPicker</span><span class="p">,</span> <span class="nx">useColor</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">"</span><span class="s2">react-color-palette</span><span class="dl">"</span><span class="p">;</span> <span class="k">import</span> <span class="dl">"</span><span class="s2">react-color-palette/lib/css/styles.css</span><span class="dl">"</span><span class="p">;</span> <span class="k">export</span> <span class="kd">const</span> <span class="nx">App</span> <span class="o">=</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span> <span class="kd">const</span> <span class="p">[</span><span class="nx">color</span><span class="p">,</span> <span class="nx">setColor</span><span class="p">]</span> <span class="o">=</span> <span class="nx">useColor</span><span class="p">(</span><span class="dl">"</span><span class="s2">hex</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">#121212</span><span class="dl">"</span><span class="p">);</span> <span class="k">return</span> <span class="o">&lt;</span><span class="nx">ColorPicker</span> <span class="nx">width</span><span class="o">=</span><span class="p">{</span><span class="mi">456</span><span class="p">}</span> <span class="nx">height</span><span class="o">=</span><span class="p">{</span><span class="mi">228</span><span class="p">}</span> <span class="nx">color</span><span class="o">=</span><span class="p">{</span><span class="nx">color</span><span class="p">}</span> <span class="nx">onChange</span><span class="o">=</span><span class="p">{</span><span class="nx">setColor</span><span class="p">}</span> <span class="nx">hideHSV</span> <span class="nx">dark</span> <span class="o">/&gt;</span><span class="p">;</span> <span class="p">};</span> </code></pre> </div> webdev react typescript javascript