{"Package":"shinyChakraUI","Title":"A Wrapper of the 'React' Library 'Chakra UI' for 'Shiny'","Version":"1.1.1","Authors@R":"c(\nperson(given = \"Stphane\",\nfamily = \"Laurent\",\nrole = c(\"aut\", \"cre\"),\nemail = \"laurent_step@outlook.fr\"),\nperson(given = \"Segun\",\nfamily = \"Adebayo\",\nrole = \"cph\",\ncomment = \"'Chakra UI' library (https://chakra-ui.com/)\"),\nperson(given = \"David\",\nfamily = \"Kaye\",\nrole = \"ctb\",\ncomment = \"'json-normalize.js'\"),\nperson(given = \"RubyLouvre\",\nrole = \"cph\",\ncomment = \"'jsx-parser' library\"),\nperson(given = \"Terence\",\nfamily = \"Eden\",\nrole = \"cph\",\ncomment = \"'SuperTinyIcons' library (https://github.com/edent/SuperTinyIcons/)\"),\nperson(given = \"Ionic (http://ionic.io/)\",\nrole = \"cph\"))","Description":"Makes the 'React' library 'Chakra UI' usable in 'Shiny' apps. 'Chakra UI' components include alert dialogs, drawers (sliding panels), menus, modals, popovers, sliders, and more.","License":"GPL (>= 3)","Encoding":"UTF-8","URL":"https://github.com/stla/shinyChakraUI","BugReports":"https://github.com/stla/shinyChakraUI/issues","RoxygenNote":"7.1.2","Imports":"htmltools, reactR, shiny, jsonlite, rlang, stringr, grDevices,\nutils, formatR, fontawesome","Suggests":"testthat (>= 3.0.0), V8","Config/testthat/edition":"3","NeedsCompilation":"no","Packaged":"2022-01-05 14:51:52 UTC; SDL96354","Author":"Stphane Laurent [aut, cre],\nSegun Adebayo [cph] ('Chakra UI' library (https://chakra-ui.com/)),\nDavid Kaye [ctb] ('json-normalize.js'),\nRubyLouvre [cph] ('jsx-parser' library),\nTerence Eden [cph] ('SuperTinyIcons' library\n(https://github.com/edent/SuperTinyIcons/)),\nIonic (http://ionic.io/) [cph]","Maintainer":"Stphane Laurent ","Repository":"CRAN","Date/Publication":"2022-01-05 15:30:06 UTC","repoType":"cran","tarballUrl":"ftp://cran.r-project.org/pub/R/src/contrib/shinyChakraUI_1.1.1.tar.gz","jsonAuthors":[{"name":"Stphane Laurent","email":"laurent_step@outlook.fr","maintainer":true},{"name":"Segun Adebayo","email":null,"maintainer":false},{"name":"David Kaye","email":null,"maintainer":false},{"name":"RubyLouvre ","email":null,"maintainer":false},{"name":"Terence Eden","email":null,"maintainer":false},{"name":"Ionic (http://ionic.io/) ","email":null,"maintainer":false}],"readme":"shinyChakraUI\n================\n\n``` r\nlibrary(shiny)\nlibrary(shinyChakraUI)\n```\n\nThe `shinyChakraUI` package is a wrapper of the React library\n`Chakra UI`. A very good documentation of this library is available at\n.\n\n# Basics\n\n- Use `chakraPage` to define your Shiny UI.\n\n- Use `chakraComponent` to define a Chakra component.\n\nFor example, here is a Chakra alert component:\n\n![](https://raw.githubusercontent.com/stla/shinyChakraUI/main/inst/screenshots/chakraAlert.png)\n\n# React states\n\nYou can use React states with the help of the `withStates` function.\nHere is an example:\n\n![](https://raw.githubusercontent.com/stla/shinyChakraUI/main/inst/screenshots/withStates.gif)\n\nThe states are defined in the second argument of the `withStates`\nfunction, in a list. Here one state is defined:\n`heading = \"I am the heading.\"`. The state is obtained in the Chakra\ncomponent with the help of the R function `getState`. To change the\nvalue of a state, you have to resort to JavaScript. The JavaScript code\nmust be given as a character string in the R function `jseval`. Here it\nis given in the `onClick` attribute of the Chakra button:\n`jseval(\"() => setState('heading', 'New heading!')\")`. When the button\nis clicked, the `'heading'` state takes the new value `'New heading!'`.\n\n# Writing JSX code\n\nSo far, we built React components with the help of the `Tag`\nconstructor. It is also possible to build a React component by writing\nits JSX code, with the help of the `jsx` function. Here is an example:\n\n![](https://raw.githubusercontent.com/stla/shinyChakraUI/main/inst/screenshots/jsx.gif)\n\nThe `jsx` function takes two arguments. The first one is the JSX element\nand the second one, named `preamble`, is some JavaScript code to be\nexecuted at first.\n\n# Setting a React state from Shiny server\n\nIn the `'heading'` React state example, we set the new value of the\nstate with the help of the JavaScript function `setState`, executed from\nthe R function `jseval`. It is also possible to set a React state from\nthe Shiny server function, with the `setReactState` function. It offers\nmore possibilities: it allows to set as a new value a React component, a\nJSX element, a Shiny widget, or some HTML code. Here is an example:\n\n![](https://raw.githubusercontent.com/stla/shinyChakraUI/main/inst/screenshots/setReactState.gif)\n\n# More examples\n\nRun `chakraExamples()` to get the list of available examples provided in\nthe package. See also the examples of the built-in widgets\n`chakraAlertDialog`, `chakraCheckboxWithChildren`, `chakraDrawer`,\n`chakraSlider`, `chakraCombinedSlider`, and `chakraModal`.\n\n# The ‘JSX parser’ RStudio addin\n\nThe package provides a RStudio addin which allows to convert some JSX\ncode to the corresponding R code to use in the `chakraComponent`\nfunction. For example, consider this JSX code:\n\n``` jsx\n\n \n Naruto\n Sasuke\n kakashi\n \n\n```\n\nCopy it to your clipboard, and then select the ‘JSX parser’ addin in the\nRStudio Addins menu. You’ll get this R code:\n\n``` r\nTag$CheckboxGroup(\n colorScheme = \"green\", defaultValue = list(\"naruto\", \"kakashi\"),\n Tag$HStack(\n Tag$Checkbox(value = \"naruto\", \"Naruto\"),\n Tag$Checkbox(value = \"sasuke\", \"Sasuke\"),\n Tag$Checkbox(value = \"kakashi\", \"kakashi\")\n )\n)\n```\n\nThis JSX parser is not perfect. It may fail, or you may have to manually\nmodify the output.","jobInfo":{"package":"shinyChakraUI","version":"1.1.1","parsingStatus":"success","parserVersion":1,"parsedAt":"2022-01-05T17:30:30+0000"}}

Description

Usage

Arguments

Value

Examples