Skip to content

Commit f69767f

Browse files
celsobonutticelsobonutti
committed
docs: adds README.md
1 parent c4f392b commit f69767f

File tree

2 files changed

+136
-0
lines changed

2 files changed

+136
-0
lines changed

‎README.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
3+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
4+
5+
<html xmlns="http://www.w3.org/1999/xhtml">
6+
7+
<head>
8+
<title>README.html</title>
9+
<meta http-equiv="Content-Type" content="application/xhtml+xml;charset=utf-8"/>
10+
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/npm/github-markdown-css/github-markdown.min.css" />
11+
<link rel="stylesheet" type="text/css" media="all" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github.min.css" /><meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'><style> body { box-sizing: border-box; max-width: 740px; width: 100%; margin: 40px auto; padding: 0 10px; } </style><script id='MathJax-script' async src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'></script><script src='https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js'></script><script>document.addEventListener('DOMContentLoaded', () => { document.body.classList.add('markdown-body'); document.querySelectorAll('pre[lang] > code').forEach((code) => { code.classList.add(code.parentElement.lang); }); document.querySelectorAll('pre > code').forEach((code) => { hljs.highlightBlock(code); }); });</script>
12+
</head>
13+
14+
<body>
15+
16+
<h1 align="center">ReScript React Feather</h1>
17+
18+
<p><a href="./LICENSE"><img src="https://img.shields.io/badge/License-GPLv3-blue.svg" alt="License: GPL v3"></a></p>
19+
<p>ReScript binding generator for the <a href="https://github.com/feathericons/react-feather">react-feather</a> library</p>
20+
<h2 id="installation">Installation</h2>
21+
<p>First run the below commands to install the dependencies:</p>
22+
<pre><code class="language-sh">yarn add @heliaxdev/rescript-react-feather react-feather
23+
</code></pre>
24+
<p>Then, add <code>@heliaxdev/rescript-react-feather</code> to <code>bs-dependencies</code>, i.e.:</p>
25+
<pre><code class="language-json">{
26+
...
27+
&quot;bs-dependencies&quot;: [
28+
&quot;@rescript/react&quot;,
29+
&quot;@heliaxdev/rescript-react-feather&quot;
30+
],
31+
}
32+
</code></pre>
33+
<p>And you should be good to go.</p>
34+
<h2 id="usage">Usage</h2>
35+
<p>This library can be used in two ways:</p>
36+
<h3 id="zero-cost-bindings">Zero-cost bindings</h3>
37+
<p>This library has zero-cost bindings for every icon in the official <a href="https://github.com/feathericons/react-feather/blob/master/src/index.d.ts">TypeScript type definitions</a>.</p>
38+
<p>You can use them like this:</p>
39+
<pre><code class="language-rescript">module CancelButton = {
40+
@react.component
41+
let make = () =&gt; {
42+
&lt;button ariaLabel=&quot;Cancel this, please&quot;&gt;
43+
&lt;ReactFeather.X color=&quot;red&quot; size=20 className=&quot;my-cross-icon&quot; /&gt;
44+
&lt;/button&gt;
45+
}
46+
}
47+
</code></pre>
48+
<h3 id="icon-component"><code>Icon</code> component</h3>
49+
<p>Aside from the zero-cost bindings, this library also generates an <code>&lt;Icon /&gt;</code> component that receives an icon name polyvariant as a prop.</p>
50+
<p>It can be used like this:</p>
51+
<pre><code class="language-rescript">module ConfirmButton = {
52+
@react.component
53+
let make = () =&gt; {
54+
&lt;button ariaLabel=&quot;Confirm this, please&quot;&gt;
55+
&lt;ReactFeather.Icon name=#Check color=&quot;green&quot; size=20 className=&quot;my-check-icon&quot; /&gt;
56+
&lt;/button&gt;
57+
}
58+
}
59+
</code></pre>
60+
<h2 id="props">Props</h2>
61+
<p>Except for the extra <code>name</code> prop in <code>ReactFeather.Icon</code>, all components have the following type:</p>
62+
<pre><code class="language-rescript">external make: (~color: string=?, ~size: int=?, ~className: string=?) =&gt; React.element
63+
</code></pre>
64+
65+
66+
</body>
67+
</html>

‎README.md

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<h1 align="center">ReScript React Feather</h1>
2+
3+
[![License: GPL v3](https://img.shields.io/badge/License-GPLv3-blue.svg)](./LICENSE)
4+
5+
ReScript binding generator for the [react-feather](https://github.com/feathericons/react-feather) library
6+
7+
## Installation
8+
First run the below commands to install the dependencies:
9+
10+
``` sh
11+
yarn add @heliaxdev/rescript-react-feather react-feather
12+
```
13+
14+
Then, add `@heliaxdev/rescript-react-feather` to `bs-dependencies`, i.e.:
15+
16+
``` json
17+
{
18+
...
19+
"bs-dependencies": [
20+
"@rescript/react",
21+
"@heliaxdev/rescript-react-feather"
22+
],
23+
}
24+
```
25+
26+
And you should be good to go.
27+
28+
## Usage
29+
This library can be used in two ways:
30+
31+
### Zero-cost bindings
32+
This library has zero-cost bindings for every icon in the official [TypeScript type definitions](https://github.com/feathericons/react-feather/blob/master/src/index.d.ts).
33+
34+
You can use them like this:
35+
36+
``` rescript
37+
module CancelButton = {
38+
@react.component
39+
let make = () => {
40+
<button ariaLabel="Cancel this, please">
41+
<ReactFeather.X color="red" size=20 className="my-cross-icon" />
42+
</button>
43+
}
44+
}
45+
```
46+
47+
### `Icon` component
48+
Aside from the zero-cost bindings, this library also generates an `<Icon />` component that receives an icon name polyvariant as a prop.
49+
50+
It can be used like this:
51+
52+
``` rescript
53+
module ConfirmButton = {
54+
@react.component
55+
let make = () => {
56+
<button ariaLabel="Confirm this, please">
57+
<ReactFeather.Icon name=#Check color="green" size=20 className="my-check-icon" />
58+
</button>
59+
}
60+
}
61+
```
62+
63+
## Props
64+
Except for the extra `name` prop in `ReactFeather.Icon`, all components have the following type:
65+
66+
``` rescript
67+
external make: (~color: string=?, ~size: int=?, ~className: string=?) => React.element
68+
```
69+

0 commit comments

Comments
 (0)