30:T759,md`## Usage ~~~js import { text, button, renderedText, render, useState } from '@gnestor/react-components' ~~~ To render a stateless component: ~~~js render(() => button({ onClick: () => { console.log('clicked!') } })) ~~~ To render a stateful component using Observable's \`viewof\` feature, use the \`rendered*\` functions which render the components and use \`useObservableState\` to sync the cell's value to the component's value: ~~~js viewof myText = renderedText() ~~~ **Tip:** You can use named aliases to import the \`rendered*\` components: ~~~js import { renderedText as text } from '@gnestor/react-components' ~~~ To compose several components in a form or more complex UI: ~~~js viewof form = render(() => { const [state, setState] = useObservableState({ button: 0, select: 'one', textarea: '' }); return [ button({ label: 'Test', onClick: event => { console.log('button', 'Test test'); setState({ ...state, button: state.button + 1 }); } }), select({ options: ['one', 'two', 'three'], setValue: value => { console.log('select', value); setState({ ...state, select: value }); } }), textarea({ setValue: value => { console.log('textarea', value); setState({ ...state, textarea: value }); } }) ]; }) ~~~ Or using the \`renderWithState\` utility: ~~~js viewof form = renderWithState((state, setState) => [ button({ label: "Test", onClick: (event) => { setState({ ...state, button: state.button + 1 }); } }), select({ options: ["one", "two", "three"], value: state.select, setValue: (value) => { setState({ ...state, select: value }); } }), textarea({ value: state.textarea, setValue: (value) => { setState({ ...state, textarea: value }); } }) ]) ~~~`31:T524,helpers = [ 'html', 'base', 'head', 'link', 'meta', 'style', 'title', 'body', 'address', 'article', 'aside', 'footer', 'header', 'h1', 'hgroup', 'main', 'nav', 'section', 'blockquote', 'dd', 'div', 'dl', 'dt', 'figcaption', 'figure', 'hr', 'li', 'ol', 'p', 'pre', 'ul', 'a', 'abbr', 'b', 'bdi', 'bdo', 'br', 'cite', 'code', 'data', 'dfn', 'em', 'i', 'kbd', 'mark', 'q', 'rb', 'rp', 'rt', 'rtc', 'ruby', 's', 'samp', 'small', 'span', 'strong', 'sub', 'sup', 'time', 'u', 'var', 'wbr', 'area', 'audio', 'img', 'map', 'track', 'video', 'embed', 'iframe', 'object', 'param', 'picture', 'source', 'svg', 'math', 'canvas', 'noscript', 'script', 'del', 'ins', 'caption', 'col', 'colgroup', 'table', 'tbody', 'td', 'tfoot', 'th', 'thead', 'tr', 'button', 'datalist', 'fieldset', 'form', 'input', 'label', 'legend', 'meter', 'optgroup', 'option', 'output', 'progress', 'select', 'textarea', 'details', 'dialog', 'menu', 'summary', 'slot', 'template' ].reduce( (result, tag) => ({ ...result, [tag]: (props = {}, children = []) => jsx`<${tag} ...${props}>${children}` }), {} )32:T75b,// viewof test = render(({ useSetter }) => { // const [state, setState] = useState({ // button: 0, // select: 'one', // textarea: '' // }); // useSetter(state); // // return jsx`<${button} label="Test" onClick=${event => { // // console.log('button', 'Test test'); // // setState({ ...state, button: state.button + 1 }); // // }} /><${select} options=${['one', 'two', 'three']} setValue=${value => { // // console.log('select', value); // // setState({ ...state, select: value }); // // }} /><${textarea} setValue=${value => { // // console.log('textarea', value); // // setState({ ...state, textarea: value }); // // }} />`; // return [ // button({ // label: 'Test', // onClick: event => { // console.log('button', 'Test test'); // setState({ ...state, button: state.button + 1 }); // } // }), // select({ // options: ['one', 'two', 'three'], // value: state.select, // setValue: value => { // console.log('select', value); // setState({ ...state, select: value }); // } // }), // textarea({ // value: state.textarea, // setValue: value => { // console.log('textarea', value); // setState({ ...state, textarea: value }); // } // }) // ]; // }) viewof test = renderWithState( (state, setState) => [ button({ label: "Test", onClick: (event) => { setState({ ...state, button: state.button + 1 }); } }), select({ options: ["one", "two", "three"], value: state.select, setValue: (value) => { setState({ ...state, select: value }); } }), textarea({ value: state.textarea, setValue: (value) => { setState({ ...state, textarea: value }); } }) ], { button: 0, select: "one", textarea: "" } )33:[] 2e:{"title":"React Components","cells":[{"id":0,"value":"md`# React Components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":305,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"md`## button\n\n~~~js\nbutton(\n props: {\n label: string,\n onClick: (event, setValue) => any, \n ...HTMLButtonElement\n }\n)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"button = (props = {}) => {\n const { label, value, setValue, ...otherProps } = props;\n return jsx``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"renderedButton = (props = {}) =>\n renderWithState((state, setState) => button(props))","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"renderedButton({\n label: 'Test',\n onClick: event => {\n console.log('button', 'Test test');\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":385,"value":"md`## input\n\n~~~js\ninput(\n props: HTMLInputElement\n)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"input = (props = {}) => {\n const { value = '', setValue, ...otherProps } = props;\n return jsx` {\n if (setValue) setValue(event.target.value);\n if (props.onChange) {\n props.onChange(event);\n }\n }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"renderedInput = (props = {}) =>\n renderWithState(\n (state, setState) =>\n input({\n ...props,\n value: state,\n onChange: (event) => {\n setState(event.target.value);\n }\n }),\n props.value || \"\"\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"viewof testInput = renderedInput({\n type: \"number\",\n value: \"1\",\n onChange: (event) => {\n console.log(\"input\", event.target.value);\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":628,"value":"testInput","pinned":true,"hidden":false,"mode":"ojs"},{"id":319,"value":"md`## text\n\n~~~js\ninput(\n props: HTMLInputElement\n)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"text = (props = {}) => {\n const { value = '', setValue, ...otherProps } = props;\n return jsx` {\n if (setValue) setValue(event.target.value);\n if (props.onChange) {\n props.onChange(event);\n }\n }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"renderedText = (props = {}) =>\n renderWithState(\n (state, setState) =>\n text({\n ...props,\n value: state,\n onChange: (event) => {\n setState(event.target.value);\n }\n }),\n props.value || ''\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":326,"value":"viewof testText = renderedText({\n onChange: event => {\n console.log('text', event.target.value);\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"testText","pinned":true,"hidden":false,"mode":"ojs"},{"id":422,"value":"md`## checkbox\n\n~~~js\ncheckbox(\n props: HTMLInputElement\n)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":425,"value":"checkbox = (props = {}) => {\n const { value = false, setValue, ...otherProps } = props;\n return jsx` {\n if (setValue) setValue(event.target.checked);\n if (props.onChange) {\n props.onChange(event);\n }\n }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":429,"value":"renderedCheckbox = (props = {}) =>\n renderWithState(\n (state, setState) =>\n checkbox({\n ...props,\n value: state,\n onChange: (event) => {\n setState(!state);\n }\n }),\n props.value || false\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":431,"value":"viewof testCheckbox = renderedCheckbox({\n onChange: event => {\n console.log('checkbox', event.target.checked);\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":618,"value":"testCheckbox","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"md`## select\n\n~~~js\nselect(\n props: {\n options: [{label: string, value: any}] | [string],\n ...HTMLSelectElement\n }\n)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"select = (props = {}) => {\n const { options = [], value, setValue, ...otherProps } = props;\n const defaultValue = value || options[0];\n return jsx``;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"renderedSelect = (props = {}) =>\n renderWithState(\n (state, setState) =>\n select({\n ...props,\n value: state,\n onChange: (event) => {\n setState(event.target.value);\n }\n }),\n props.options[0]\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"viewof testSelect = renderedSelect({\n options: ['one', 'two', 'three'],\n onChange: event => {\n console.log('select', event.target.value);\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":608,"value":"testSelect","pinned":true,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`## textarea\n\n~~~js\ntextarea(props: HTMLTextAreaElement)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"textarea = (props = {}) => {\n const { value = '', setValue, ...otherProps } = props;\n const defaultProps = { style: { width: '100%' }, rows: 10 };\n return jsx`

{\n    if (setValue) setValue(event.target.value);\n    if (props.onChange) {\n      props.onChange(event);\n    }\n  }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"renderedTextarea = (props = {}) =>\n  renderWithState(\n    (state, setState) =>\n      textarea({\n        ...props,\n        value: state,\n        onChange: (event) => {\n          setState(event.target.value);\n        }\n      }),\n    props.value || \"\"\n  )","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"value":"viewof testTextarea = renderedTextarea({\n  value: \"Placeholder\",\n  onChange: (event) => {\n    console.log(\"textarea\", event.target.value);\n  }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":610,"value":"testTextarea","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"md`## date\n\n~~~js\ndate(props: HTMLInputElement)\n~~~`","pinned":false,"hidden":false,"mode":"ojs"},{"id":53,"value":"date = (props = {}) => {\n  const { value = toDateString(), setValue, ...otherProps } = props;\n  return jsx`<input ...${otherProps} type=\"date\" value=${value} onChange=${event => {\n    if (setValue) setValue(event.target.value);\n    if (props.onChange) {\n      props.onChange(event);\n    }\n  }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"renderedDate = (props = {}) =>\n  renderWithState(\n    (state, setState) =>\n      date({\n        ...props,\n        value: state,\n        onChange: (event) => {\n          setState(event.target.value);\n        }\n      }),\n    props.value || toDateString()\n  )","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"viewof testDate = renderedDate()","pinned":true,"hidden":false,"mode":"ojs"},{"id":614,"value":"testDate","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`## Helpers`","pinned":false,"hidden":false,"mode":"ojs"},{"id":451,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"md`## Combined`","pinned":false,"hidden":false,"mode":"ojs"},{"id":268,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"test","pinned":true,"hidden":false,"mode":"ojs"},{"id":466,"value":"md`## Custom components`","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"copyButton = ({ data, ...props }) =>\n  renderedButton({\n    label: \"Copy\",\n    onClick: () => {\n      copy(data);\n    },\n    ...props\n  })","pinned":true,"hidden":false,"mode":"ojs"},{"id":492,"value":"// customSelect = (options, displayProperty = \"name\") => {\n//   if (!options || options.length === 0) return null;\n//   return render(({ useSetter }) => {\n//     const [value, setValue] = useState(options[0]);\n//     useSetter(value);\n//     return select({\n//       options: options.map((value) => value[displayProperty]),\n//       value: value[displayProperty],\n//       setValue: (value) =>\n//         setValue(options.find((_value) => _value[displayProperty] === value))\n//     });\n//   });\n// }\ncustomSelect = (options = [], displayProperty = \"name\") =>\n  renderWithState((state, setState) => {\n    if (!options || options.length === 0) return null;\n    return select({\n      options: options.map((value) => value[displayProperty]),\n      value: state[displayProperty],\n      setValue: (value) =>\n        setState(options.find((_value) => _value[displayProperty] === value))\n    });\n  }, options[0])","pinned":true,"hidden":false,"mode":"ojs"},{"id":105,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"renderWithState = (f, defaultValue = {}) =>\n  render(() => {\n    const [state, setState] = useObservableState(defaultValue);\n    const mergeAndSetState = (change) => setState({ ...state, ...change });\n    return f(state, setState);\n  })","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"toDateString = date =>\n  date\n    ? date.toISOString().replace(/T.+/, '')\n    : new Date().toISOString().replace(/T.+/, '')","pinned":true,"hidden":false,"mode":"ojs"},{"id":5,"value":"import {\n  render,\n  useObservableState,\n  React,\n  ReactDOM,\n  useEffect,\n  useState,\n  useContext,\n  useRef,\n  useMemo,\n  useCallback,\n  useImperativeHandle,\n  useReducer,\n  useId,\n  useTransition,\n  Fragment,\n  memo,\n  lazy,\n  forwardRef,\n  startTransition,\n  createContext,\n  Suspense,\n  createFactory,\n  createElement,\n  createRoot,\n  createPortal,\n  jsx\n} from \"@gnestor/react\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"import { copy } from '@gnestor/grants-utilities'","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}
</article></body></html>