reactR/docs/index.html at develop · react-R/reactR · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<!DOCTYPE html>
<!-- Generated by pkgdown: do not edit by hand --><html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Helpers • reactR</title>
<!-- favicons --><link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="apple-touch-icon.png">
<link rel="apple-touch-icon" type="image/png" sizes="120x120" href="apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" type="image/png" sizes="76x76" href="apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" type="image/png" sizes="60x60" href="apple-touch-icon-60x60.png">
<!-- jquery --><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script><!-- Bootstrap --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha256-bZLfwXAP04zRMK2BjiO8iu9pf4FbLqX6zitd+tIvLhE=" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha256-nuL8/2cJ5NDSSwnKD8VqreErSWHtnEP9E7AySL+1ev4=" crossorigin="anonymous"></script><!-- bootstrap-toc --><link rel="stylesheet" href="bootstrap-toc.css">
<script src="bootstrap-toc.js"></script><!-- Font Awesome icons --><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css" integrity="sha256-mmgLkCYLUQbXn0B1SRqzHar6dCnv9oZFPEC1g1cwlkk=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/v4-shims.min.css" integrity="sha256-wZjR52fzng1pJHwx4aV2AO3yyTOXrcDW7jBpJtTwVxw=" crossorigin="anonymous">
<!-- clipboard.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.6/clipboard.min.js" integrity="sha256-inc5kl9MA1hkeYUt+EC3BhlIgyp/2jDIyBLS6k3UxPI=" crossorigin="anonymous"></script><!-- headroom.js --><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/headroom.min.js" integrity="sha256-AsUX4SJE1+yuDu5+mAVzJbuYNPHj/WroHuZ8Ir/CkE0=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/headroom/0.11.0/jQuery.headroom.min.js" integrity="sha256-ZX/yNShbjqsohH1k95liqY9Gd8uOiE1S4vZc+9KQ1K4=" crossorigin="anonymous"></script><!-- pkgdown --><link href="pkgdown.css" rel="stylesheet">
<script src="pkgdown.js"></script><meta property="og:title" content="React Helpers">
<meta property="og:description" content="Make it easy to use React in R with htmlwidget scaffolds,
              helper dependency functions, an embedded Babel transpiler,
              and examples.">
<!-- mathjax --><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js" integrity="sha256-nvJJv9wWKEm88qvoQl9ekL2J+k/RWIsaSScxxlsrv8k=" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/config/TeX-AMS-MML_HTMLorMML.js" integrity="sha256-84DKXVJXs0/F8OTMzX4UR909+jtl4G7SPypPavF+GfA=" crossorigin="anonymous"></script><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#toc">


    <div class="container template-home">
      <header><div class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <span class="navbar-brand">
        <a class="navbar-link" href="index.html">reactR</a>
        <span class="version label label-default" data-toggle="tooltip" data-placement="bottom" title="">0.6.1</span>
      </span>
    </div>

    <div id="navbar" class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
<li>
  <a href="reference/index.html">Reference</a>
</li>
<li class="dropdown">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
    Articles

    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu" role="menu">
<li>
      <a href="articles/intro_htmlwidgets.html">Authoring htmlwidgets powered by React with reactR</a>
    </li>
    <li>
      <a href="articles/intro_inputs.html">Authoring inputs powered by React with reactR</a>
    </li>
    <li>
      <a href="articles/intro_reactR.html">Intro to reactR</a>
    </li>
  </ul>
</li>
<li>
  <a href="news/index.html">Changelog</a>
</li>
      </ul>
<ul class="nav navbar-nav navbar-right">
<li>
  <a href="https://github.com/react-R/reactR/" class="external-link">
    <span class="fab fa-github fa-lg"></span>

  </a>
</li>
      </ul>
</div>
<!--/.nav-collapse -->
  </div>
<!--/.container -->
</div>
<!--/.navbar -->


      </header><div class="row">
  <div class="contents col-md-9">
<div class="section level1">
<div class="page-header"><h1 id="reactr-">reactR <img src="articles/logo.svg" alt="reactR logo" width="100px"><a class="anchor" aria-label="anchor" href="#reactr-"></a>
</h1></div>
<!-- README.md is generated from README.Rmd. Please edit that file -->
<p><a href="https://cran.r-project.org/package=reactR" class="external-link"><img src="https://www.r-pkg.org/badges/version/reactR" alt="CRAN_Status_Badge"></a> <a href="https://github.com/react-R/reactR/actions/workflows/R-CMD-check.yaml" class="external-link"><img src="https://github.com/react-R/reactR/actions/workflows/R-CMD-check.yaml/badge.svg" alt="R-CMD-check"></a></p>
<p><code>reactR</code> provides a set of convenience functions for using <a href="https://reactjs.org/" class="external-link"><code>React</code></a> in <code>R</code> with <code>htmlwidget</code> constructor templates and local JavaScript dependencies. The <code>React</code> ecosystem is rich with components that can enhance <code>R</code> web and Shiny apps. <code><a href="reference/scaffoldReactWidget.html">scaffoldReactWidget()</a></code> helps build <code>htmlwidgets</code> to integrate these <code>React</code> components as <code>R</code> <code>htmlwidgets</code>. <code><a href="reference/scaffoldReactShinyInput.html">scaffoldReactShinyInput()</a></code> does the same for <code>Shiny</code> inputs. The local dependency functions are modeled after the <code>html_dependency_*</code> functions from RStudio’s <a href="https://github.com/rstudio/rmarkdown" class="external-link"><code>rmarkdown</code></a> package.</p>
<div class="section level2">
<h2 id="installation">Installation<a class="anchor" aria-label="anchor" href="#installation"></a>
</h2>
<p>You can install reactR from CRAN with <code>install.packages("reactR")</code>. For the development version, please use <code>devtools</code> as shown below.</p>
<div class="sourceCode" id="cb1"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="co"># install.packages("devtools")</span></span>
<span><span class="fu">devtools</span><span class="fu">::</span><span class="fu"><a href="https://remotes.r-lib.org/reference/install_github.html" class="external-link">install_github</a></span><span class="op">(</span><span class="st">"react-R/reactR"</span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="creating-htmlwidgets-with-react-components">Creating htmlwidgets with React Components<a class="anchor" aria-label="anchor" href="#creating-htmlwidgets-with-react-components"></a>
</h2>
<p>To wrap a <code>React</code> component as an <code>htmlwidget</code>, please see the tutorial <a href="https://react-r.github.io/reactR/articles/intro_htmlwidgets.html" class="external-link">htmlwidgets with reactR</a>. Also, there are a variety of examples in the <a href="https://github.com/react-R" class="external-link">react-R Github organization</a>.</p>
<p><a href="https://github.com/glin/reactable" class="external-link"><code>reactable</code></a> is a very well-built <code>htmlwidget</code> leveraging this functionality.</p>
</div>
<div class="section level2">
<h2 id="shiny-outputs-and-inputs">Shiny Outputs and Inputs<a class="anchor" aria-label="anchor" href="#shiny-outputs-and-inputs"></a>
</h2>
<p><code>htmlwidgets</code> built with <code>reactR</code> work well in Shiny as outputs. In version <code>0.4.0</code> Alan Dipert has added the ability to easily create React-based official <code>Shiny</code> inputs with helpers and scaffolds. Please see the <a href="https://react-r.github.io/reactR/articles/intro_inputs.html" class="external-link">tutorial</a> for more details.</p>
</div>
<div class="section level2">
<h2 id="examples">Examples<a class="anchor" aria-label="anchor" href="#examples"></a>
</h2>
<p>Below are examples of using <code>reactR</code> directly.</p>
<div class="sourceCode" id="cb2"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/react-R/reactR" class="external-link">reactR</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/rstudio/htmltools" class="external-link">htmltools</a></span><span class="op">)</span></span>
<span></span>
<span><span class="fu"><a href="https://rstudio.github.io/htmltools/reference/browsable.html" class="external-link">browsable</a></span><span class="op">(</span><span class="fu"><a href="https://rstudio.github.io/htmltools/reference/tagList.html" class="external-link">tagList</a></span><span class="op">(</span></span>
<span>  <span class="va">tags</span><span class="op">$</span><span class="fu">div</span><span class="op">(</span>id <span class="op">=</span> <span class="st">"app"</span><span class="op">)</span>,</span>
<span>  <span class="va">tags</span><span class="op">$</span><span class="fu">script</span><span class="op">(</span></span>
<span>  <span class="st">"</span></span>
<span><span class="st">    ReactDOM.render(</span></span>
<span><span class="st">      React.createElement(</span></span>
<span><span class="st">        'h1',</span></span>
<span><span class="st">        null,</span></span>
<span><span class="st">        'Powered by React'</span></span>
<span><span class="st">      ),</span></span>
<span><span class="st">      document.getElementById('app')</span></span>
<span><span class="st">    )</span></span>
<span><span class="st">  "</span></span>
<span>  <span class="op">)</span>,</span>
<span>  <span class="co">#add core-js first to work in RStudio Viewer</span></span>
<span>  <span class="fu"><a href="reference/html_dependency_corejs.html">html_dependency_corejs</a></span><span class="op">(</span><span class="op">)</span>,</span>
<span>  <span class="fu"><a href="reference/html_dependency_react.html">html_dependency_react</a></span><span class="op">(</span><span class="op">)</span></span>
<span><span class="op">)</span><span class="op">)</span></span></code></pre></div>
<p><code>reactR</code> uses the <code>V8</code> package if available to transform <code>JSX</code> and <code>ES2015</code> code with <code>babel</code>.</p>
<div class="sourceCode" id="cb3"><pre class="downlit sourceCode r">
<code class="sourceCode R"><span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/react-R/reactR" class="external-link">reactR</a></span><span class="op">)</span></span>
<span><span class="kw"><a href="https://rdrr.io/r/base/library.html" class="external-link">library</a></span><span class="op">(</span><span class="va"><a href="https://github.com/rstudio/htmltools" class="external-link">htmltools</a></span><span class="op">)</span></span>
<span></span>
<span><span class="fu"><a href="https://rstudio.github.io/htmltools/reference/browsable.html" class="external-link">browsable</a></span><span class="op">(</span></span>
<span>  <span class="fu"><a href="https://rstudio.github.io/htmltools/reference/tagList.html" class="external-link">tagList</a></span><span class="op">(</span></span>
<span>    <span class="va">tags</span><span class="op">$</span><span class="fu">div</span><span class="op">(</span>id <span class="op">=</span> <span class="st">"app"</span><span class="op">)</span>,</span>
<span>    <span class="va">tags</span><span class="op">$</span><span class="fu">script</span><span class="op">(</span></span>
<span>      <span class="fu"><a href="reference/babel_transform.html">babel_transform</a></span><span class="op">(</span><span class="st">'ReactDOM.render(&lt;h1&gt;Powered By React/JSX&lt;/h1&gt;,document.getElementById("app"))'</span><span class="op">)</span></span>
<span>    <span class="op">)</span>,</span>
<span>    <span class="co"># add core-js shim first for React in older versions of RStudio Viewer</span></span>
<span>    <span class="co">#html_dependency_corejs(),</span></span>
<span>    <span class="fu"><a href="reference/html_dependency_react.html">html_dependency_react</a></span><span class="op">(</span><span class="op">)</span></span>
<span>  <span class="op">)</span></span>
<span><span class="op">)</span></span></code></pre></div>
</div>
<div class="section level2">
<h2 id="contributing-and-code-of-conduct">Contributing and Code of Conduct<a class="anchor" aria-label="anchor" href="#contributing-and-code-of-conduct"></a>
</h2>
<p>We welcome contributors and would love your participation. Please note that this project is released with a <a href="https://github.com/react-R/reactR/blob/master/CONDUCT.md" class="external-link">Contributor Code of Conduct</a>. By participating in this project you agree to abide by the terms.</p>
</div>
</div>
  </div>

  <div class="col-md-3 hidden-xs hidden-sm" id="pkgdown-sidebar">
    <div class="links">
<h2 data-toc-skip>Links</h2>
<ul class="list-unstyled">
<li><a href="https://cloud.r-project.org/package=reactR" class="external-link">View on CRAN</a></li>
<li><a href="https://github.com/react-R/reactR/" class="external-link">Browse source code</a></li>
<li><a href="https://github.com/react-R/reactR/issues" class="external-link">Report a bug</a></li>
</ul>
</div>

<div class="license">
<h2 data-toc-skip>License</h2>
<ul class="list-unstyled">
<li>
<a href="https://opensource.org/licenses/mit-license.php" class="external-link">MIT</a> + file <a href="LICENSE-text.html">LICENSE</a>
</li>
</ul>
</div>


<div class="citation">
<h2 data-toc-skip>Citation</h2>
<ul class="list-unstyled">
<li><a href="authors.html#citation">Citing reactR</a></li>
</ul>
</div>

<div class="developers">
<h2 data-toc-skip>Developers</h2>
<ul class="list-unstyled">
<li>Facebook Inc <br><small class="roles"> Author, copyright holder </small>  </li>
<li>Michel Weststrate <br><small class="roles"> Author, copyright holder </small>  </li>
<li>Kent Russell <br><small class="roles"> Author, maintainer </small>  </li>
<li>Alan Dipert <br><small class="roles"> Author </small>  </li>
<li>Greg Lin <br><small class="roles"> Author </small>  </li>
<li><a href="authors.html">More about authors...</a></li>
</ul>
</div>


  </div>
</div>


      <footer><div class="copyright">
  <p></p>
<p>Developed by Facebook Inc, Michel Weststrate, Kent Russell, Alan Dipert, Greg Lin.</p>
</div>

<div class="pkgdown">
  <p></p>
<p>Site built with <a href="https://pkgdown.r-lib.org/" class="external-link">pkgdown</a> 2.0.7.</p>
</div>

      </footer>
</div>


  </body>
</html>