3c:null 3d:["$","title",null,{"children":"React Components (using @j-f1/react) | Jed Fox | Observable"}] 43:T562,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 \`useSetter\` 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(({ useSetter }) => { const [state, setState] = useState({ button: 0, select: 'one', textarea: '' }); useSetter(state); 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 }); } }) ]; }) ~~~`44:T47c,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'], setValue: value => { console.log('select', value); setState({ ...state, select: value }); } }), textarea({ setValue: value => { console.log('textarea', value); setState({ ...state, textarea: value }); } }) ]; })45:[] 41:{"id":"b09885fd880f3092","slug":null,"title":"React Components (using @j-f1/react)","thumbnail":"051edd7808daf125cb6b67bff4c1bb467d9e1465c2c9740fcaecba1fd61f1ec1","access_level":"unlisted","create_time":"$D2020-08-27T21:49:37.139Z","update_time":"$D2020-08-27T21:49:37.139Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"d2030a8eee317bb7","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":"starter_2024","bio":""},"version":415,"publish_version":415,"role":null,"authored":false,"authors":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null,"bio":""}],"members":[{"type":"individual","id":"6a6723dba070655c","login":"j-f1","name":"Jed Fox","avatar_url":"https://avatars-next.observableusercontent.com/d222a344a2bdf162a8495aa976e7c08179a554665edaa137ea155ef6bb38fc37","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"React Components (using @j-f1/react)","cells":[{"id":0,"value":"md`# React Components (using @j-f1/react)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"button = (props = {}) => {\n const { label, value, setValue, ...otherProps } = props;\n return jsx``;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"renderedButton = (props = {}) => renderWithSetter(button, props)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"renderedButton({\n label: 'Test',\n onClick: event => {\n console.log('button', 'Test test');\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"md`## input\n\n~~~js\ninput(\n props: HTMLInputElement\n)\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"input = (props = {}) => {\n const { value = '', setValue, ...otherProps } = props;\n return jsx` {\n setValue(event.target.value);\n if (props.onChange) {\n props.onChange(event);\n }\n }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"renderedInput = (props = {}) =>\n renderWithSetter(input, { ...props, value: props.value || '' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":380,"value":"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"md`## text\n\n~~~js\ninput(\n props: HTMLInputElement\n)\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"text = (props = {}) => {\n const { value = '', setValue, ...otherProps } = props;\n return jsx` {\n setValue(event.target.value);\n if (props.onChange) {\n props.onChange(event);\n }\n }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":324,"value":"renderedText = (props = {}) =>\n renderWithSetter(text, { ...props, value: props.value || '' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"renderedText({\n onChange: event => {\n console.log('text', event.target.value);\n }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"md`## select\n\n~~~js\nselect(props: {\n options: [{label: string, value: any}] | [string],\n ...HTMLSelectElement\n})\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":283,"value":"renderedSelect = (props = {}) =>\n renderWithSetter(select, { ...props, value: props.value || props.options[0] })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"md`## textarea\n\n~~~js\ntextarea(props: HTMLTextAreaElement)\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"textarea = (props = {}) => {\n const { value = '', setValue, ...otherProps } = props;\n const defaultProps = { style: { width: '100%' }, rows: 10 };\n return jsx`

{\n    setValue(event.target.value);\n    if (props.onChange) {\n      props.onChange(event);\n    }\n  }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"renderedTextarea = (props = {}) =>\n  renderWithSetter(textarea, { ...props, value: props.value || '' })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"renderedTextarea({\n  value: 'Placeholder',\n  onChange: event => {\n    console.log('textarea', event.target.value);\n  }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"md`## date\n\n~~~js\ndate(props: HTMLInputElement)\n~~~`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":53,"value":"date = (props = {}) => {\n  const { value = toDateString(), setValue, ...otherProps } = props;\n  return jsx`<input ...${otherProps} type=\"date\" value=${value} onChange=${event => {\n    setValue(event.target.value);\n    if (props.onChange) {\n      props.onChange(event);\n    }\n  }} />`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"value":"renderedDate = (props = {}) =>\n  renderWithSetter(date, { ...props, value: props.value || toDateString() })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"renderedDate({\n  value: '2020-01-01',\n  onChange: event => {\n    console.log('date', event.target.value);\n  }\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"md`## Combined`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"$44","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"test","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"renderWithSetter = (component, props = {}) =>\n  render(({ useSetter }) => {\n    const [value, setValue] = useState(props.value || '');\n    useSetter(value);\n    return component({ ...props, value, setValue });\n  }, component.toString())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"toDateString = date =>\n  date\n    ? date.toISOString().replace(/T.+/, '')\n    : new Date().toISOString().replace(/T.+/, '')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"import { render, component, jsx, useState, useCallback } from '@j-f1/react'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W45","stdlib":"1"}}
42:"$41:body"
</article></body></html>