Update README
This commit is contained in:
Angelos Chalaris
@ -18,9 +18,9 @@
|
||||
{
|
||||
"name": "Carousel.md",
|
||||
"title": "Carousel",
|
||||
"text": "Renders a carousel component.\n\nInitially set `state.active` to `0` (index of the first item).\nUse an object, `style`, to hold the styles for the individual components.\nDefine a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.\nDefine another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component\nfirst renders (on `ComponentDidMount`).\nIn the `render()` method, destructure `state`, `style` and `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\nRender the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest\n`props` along with the computed styles.\n\n",
|
||||
"text": "Renders a carousel component.\n\nUse the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).\nUse an object, `style`, to hold the styles for the individual components.\nUse the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.\nDestructure `props`, compute if visibility style should be set to `visible` or not for each carousel item while mapping over and applying the combined style to the carousel item component accordingly.\nRender the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.\n\n",
|
||||
"codeBlocks": [
|
||||
"```jsx\nclass Carousel extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n active: 0\n };\n this.scrollInterval = null;\n this.style = {\n carousel: {\n position: \"relative\"\n },\n carouselItem: {\n position: \"absolute\",\n visibility: \"hidden\"\n },\n visible: {\n visibility: \"visible\"\n }\n };\n }\n componentDidMount() {\n this.changeItem();\n }\n setActiveItem = () => {\n const { carouselItems } = this.props;\n this.setState(\n prevState => ({\n active: (prevState.active + 1) % carouselItems.length\n }),\n this.changeItem\n );\n };\n changeItem = () => {\n this.scrollInterval = setTimeout(this.setActiveItem, 2000);\n };\n render() {\n const { carouselItems, ...rest } = this.props;\n const { active } = this.state;\n const { visible, carousel, carouselItem } = this.style;\n return (\n <div style={carousel}>\n {carouselItems.map((item, index) => {\n const activeStyle = active === index ? visible : {};\n return React.cloneElement(item, {\n ...rest,\n style: {\n ...carouselItem,\n ...activeStyle\n }\n });\n })}\n </div>\n );\n }\n}\n```",
|
||||
"```jsx\nfunction Carousel(props) {\n const [active, setActive] = React.useState(0);\n let scrollInterval = null;\n const style = {\n carousel: {\n position: \"relative\"\n },\n carouselItem: {\n position: \"absolute\",\n visibility: \"hidden\"\n },\n visible: {\n visibility: \"visible\"\n }\n };\n React.useEffect(() => {\n scrollInterval = setTimeout(() => {\n const { carouselItems } = props;\n setActive((active + 1) % carouselItems.length);\n }, 2000);\n });\n const { carouselItems, ...rest } = props;\n return (\n <div style={style.carousel}>\n {carouselItems.map((item, index) => {\n const activeStyle = active === index ? style.visible : {};\n return React.cloneElement(item, {\n ...rest,\n style: {\n ...style.carouselItem,\n ...activeStyle\n }\n });\n })}\n </div>\n );\n}\n```",
|
||||
"```jsx\nReactDOM.render(\n <Carousel\n carouselItems={[\n <div>carousel item 1</div>,\n <div>carousel item 2</div>,\n <div>carousel item 3</div>\n ]}\n />,\n document.getElementById(\"root\")\n);\n ```"
|
||||
],
|
||||
"expertise": 2,
|
||||
@ -35,9 +35,9 @@
|
||||
{
|
||||
"name": "Collapse.md",
|
||||
"title": "Collapse",
|
||||
"text": "Renders a component with collapsible content.\n\nUse the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded).\nSet the `state` of the component to the value of the `collapsed` prop (cast to a boolean value) and bind the `toggleCollapse` method to the component's context.\nUse an object, `style`, to hold the styles for individual components and their states.\nCreate a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.\nIn the `render()` method, use a `<div>` to wrap both the `<button>` that alters the component's `state` and the content of the component, passed down via `props.children`.\nDetermine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.\nFinally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.\n\n",
|
||||
"text": "Renders a component with collapsible content.\n\nUse the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.\nUse an object, `style`, to hold the styles for individual components and their states.\nUse a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `props.children`.\nDetermine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.\nFinally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.\n\n",
|
||||
"codeBlocks": [
|
||||
"```jsx\nclass Collapse extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n collapsed: !!props.collapsed\n };\n this.style = {\n collapsed: {\n display: 'none'\n },\n expanded: {\n display: 'block'\n },\n buttonStyle: {\n display: 'block',\n width: '100%'\n }\n };\n this.toggleCollapse = this.toggleCollapse.bind(this);\n }\n \n toggleCollapse() {\n this.setState(state => ({ collapsed: !state.collapsed }));\n }\n \n render() {\n return (\n <div>\n <button style={this.style.buttonStyle} onClick={this.toggleCollapse}>\n {this.state.collapsed ? 'Show' : 'Hide'} content\n </button>\n <div \n style= {this.state.collapsed ? this.style.collapsed : this.style.expanded} \n aria-expanded = {this.state.collapsed}\n >\n {this.props.children}\n </div>\n </div>\n );\n }\n}\n```",
|
||||
"```jsx\nfunction Collapse(props) {\n const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);\n\n const style = {\n collapsed: {\n display: \"none\"\n },\n expanded: {\n display: \"block\"\n },\n buttonStyle: {\n display: \"block\",\n width: \"100%\"\n }\n };\n\n return (\n <div>\n <button\n style={style.buttonStyle}\n onClick={() => setIsCollapsed(!isCollapsed)}\n >\n {isCollapsed ? \"Show\" : \"Hide\"} content\n </button>\n <div\n className=\"collapse-content\"\n style={isCollapsed ? style.collapsed : style.expanded}\n aria-expanded={isCollapsed}\n >\n {props.children}\n </div>\n </div>\n );\n}\n```",
|
||||
"```jsx\nReactDOM.render(\n <Collapse>\n <h1>This is a collapse</h1>\n <p>Hello world!</p>\n </Collapse>,\n document.getElementById('root')\n);\n```"
|
||||
],
|
||||
"expertise": 2,
|
||||
@ -115,9 +115,9 @@
|
||||
{
|
||||
"name": "LimitedTextarea.md",
|
||||
"title": "LimitedTextarea",
|
||||
"text": "Renders a textarea component with a character limit.\n\nUse the value of the `value` prop to determine the initial `state.content` and `state.characterCount` and the value of the `limit` props to determine the value of `state.limit`.\nCreate a method, `handleChange`, which trims the `event.target.value` data if necessary and uses `Component.prototype.setState` to update `state.content` and `state.characterCount`, and bind it to the component's context.\nIn the`render()` method, use a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to the `handleChange` method.\n\n",
|
||||
"text": "Renders a textarea component with a character limit.\n\nUse the `React.useState()` hook to create the `content` state variable and set its value to `value`.\nCreate a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.\nUse the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.\nUse a`<div>` to wrap both the`<textarea>` and the `<p>` element that displays the character count and bind the `onChange` event of the `<textarea>` to call `setFormattedContent` with the value of `event.target.value`.\n\n",
|
||||
"codeBlocks": [
|
||||
"```jsx\nclass LimitedTextarea extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n content: props.value,\n characterCount: props.value.length,\n limit: props.limit\n };\n this.handleChange = this.handleChange.bind(this);\n }\n \n handleChange(event) {\n let newContent = event.target.value;\n if(newContent.length >= this.state.limit) newContent = newContent.slice(0, this.state.limit);\n this.setState(state => ({ content: newContent, characterCount: newContent.length }));\n }\n render() {\n return (\n <div>\n <textarea \n rows={this.props.rows} \n cols={this.props.cols} \n onChange={this.handleChange} \n value={this.state.content}\n >\n </textarea>\n <p>{this.state.characterCount}/{this.props.limit}</p>\n </div>\n );\n }\n}\n```",
|
||||
"```jsx\nfunction LimitedTextarea({ rows, cols, value, limit }) {\n const [content, setContent] = React.useState(value);\n\n const setFormattedContent = text => {\n text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);\n };\n\n React.useEffect(() => {\n setFormattedContent(content);\n }, []);\n\n return (\n <div>\n <textarea\n rows={rows}\n cols={cols}\n onChange={event => setFormattedContent(event.target.value)}\n value={content}\n />\n <p>\n {content.length}/{limit}\n </p>\n </div>\n );\n}\n```",
|
||||
"```jsx\nReactDOM.render(\n <LimitedTextarea limit={32} value='Hello!' />,\n document.getElementById('root')\n);\n```"
|
||||
],
|
||||
"expertise": 0,
|
||||
@ -190,9 +190,9 @@
|
||||
{
|
||||
"name": "PasswordRevealer.md",
|
||||
"title": "PasswordRevealer",
|
||||
"text": "Renders a password input field with a reveal button.\n\nInitially set `state.shown` to `false` to ensure that the password is not shown by default.\nCreate a method, `toggleShown`, which uses `Component.prototype.setState` to change the input's state from shown to hidden and vice versa, bind it to the component's context.\nIn the`render()` method, use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field.\nFinally, bind the `<button>`'s `onClick` event to the `toggleShown` method.\n\n",
|
||||
"text": "Renders a password input field with a reveal button.\n\nUse the `React.useState()` hook to create the `shown` state vairable and set its value to `false`.\nUse a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `\"text\"` and `\"password\"`.\n\n",
|
||||
"codeBlocks": [
|
||||
"```jsx\nclass PasswordRevealer extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n shown: false\n };\n this.toggleShown = this.toggleShown.bind(this);\n }\n\n toggleShown() {\n this.setState(state => ({ shown: !state.shown }));\n }\n\n render() {\n return (\n <div>\n <input\n type={this.state.shown ? 'text' : 'password'}\n value={this.props.value}\n />\n <button onClick={this.toggleShown}>Show/Hide</button>\n </div>\n );\n }\n}\n```",
|
||||
"```jsx\nfunction PasswordRevealer({ value }) {\n const [shown, setShown] = React.useState(false);\n\n return (\n <div>\n <input\n type={shown ? \"text\" : \"password\"}\n value={value}\n onChange={() => {}}\n />\n <button onClick={() => setShown(!shown)}>Show/Hide</button>\n </div>\n );\n}\n```",
|
||||
"```jsx\nReactDOM.render(<PasswordRevealer />, document.getElementById('root'));\n```"
|
||||
],
|
||||
"expertise": 0,
|
||||
@ -320,10 +320,10 @@
|
||||
{
|
||||
"name": "TreeView.md",
|
||||
"title": "TreeView",
|
||||
"text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse `defaultProps` to set the default values of certain props.\nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nSet the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.\nCreate a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.\nIn the `render()` method, use a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `state`.\nDetermine the appearance of the component, based on `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`. \nFor each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `<p>` element with the appropriate style.\n\n",
|
||||
"text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse object destructuring to set defaults for certain props. \nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nUse the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.\nReturn a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.\nDetermine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`. \nFor each child in `data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `<p>` element with the appropriate style.\n\n",
|
||||
"codeBlocks": [
|
||||
"```css\n.tree-element {\n margin: 0;\n position: relative;\n}\n\ndiv.tree-element:before {\n content: '';\n position: absolute;\n top: 24px;\n left: 1px;\n height: calc(100% - 48px);\n border-left: 1px solid gray;\n}\n\n.toggler {\n position: absolute;\n top: 10px;\n left: 0px;\n width: 0; \n height: 0; \n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 5px solid gray;\n cursor: pointer;\n}\n\n.toggler.closed {\n transform: rotate(90deg);\n}\n\n.collapsed {\n display: none;\n}\n```",
|
||||
"```jsx\nclass TreeView extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toggled: props.toggled\n };\n this.toggle = this.toggle.bind(this);\n }\n\n toggle() {\n this.setState(state => ({ toggled: !state.toggled }));\n }\n\n render() {\n return (\n <div\n style={{ marginLeft: this.props.isChildElement ? 16 : 4 + \"px\" }}\n className={\n this.props.isParentToggled ? \"tree-element\" : \"tree-element collapsed\"\n }\n >\n <span\n className={this.state.toggled ? \"toggler\" : \"toggler closed\"}\n onClick={this.toggle}\n />\n {this.props.name ? (\n <strong> {this.props.name}: </strong>\n ) : (\n <span> </span>\n )}\n {Array.isArray(this.props.data) ? \"[\" : \"{\"}\n {!this.state.toggled && \"...\"}\n {Object.keys(this.props.data).map(\n (v, i, a) =>\n typeof this.props.data[v] == \"object\" ? (\n <TreeView\n data={this.props.data[v]}\n isLast={i === a.length - 1}\n name={Array.isArray(this.props.data) ? null : v}\n isChildElement\n isParentToggled={\n this.props.isParentToggled && this.state.toggled\n }\n />\n ) : (\n <p\n style={{ marginLeft: 16 + \"px\" }}\n className={\n this.state.toggled ? \"tree-element\" : \"tree-element collapsed\"\n }\n >\n {Array.isArray(this.props.data) ? \"\" : <strong>{v}: </strong>}\n {this.props.data[v]}\n {i === a.length - 1 ? \"\" : \",\"}\n </p>\n )\n )}\n {Array.isArray(this.props.data) ? \"]\" : \"}\"}\n {!this.props.isLast ? \",\" : \"\"}\n </div>\n );\n }\n}\n\nTreeView.defaultProps = {\n isLast: true,\n toggled: true,\n name: null,\n isChildElement: false,\n isParentToggled: true\n}\n```",
|
||||
"```jsx\nfunction TreeView({\n data,\n toggled = true,\n name = null,\n isLast = true,\n isChildElement = false,\n isParentToggled = true\n}) {\n const [isToggled, setIsToggled] = React.useState(toggled);\n\n return (\n <div\n style={{ marginLeft: isChildElement ? 16 : 4 + \"px\" }}\n className={isParentToggled ? \"tree-element\" : \"tree-element collapsed\"}\n >\n <span\n className={isToggled ? \"toggler\" : \"toggler closed\"}\n onClick={() => setIsToggled(!isToggled)}\n />\n {name ? <strong> {name}: </strong> : <span> </span>}\n {Array.isArray(data) ? \"[\" : \"{\"}\n {!isToggled && \"...\"}\n {Object.keys(data).map(\n (v, i, a) =>\n typeof data[v] == \"object\" ? (\n <TreeView\n data={data[v]}\n isLast={i === a.length - 1}\n name={Array.isArray(data) ? null : v}\n isChildElement\n isParentToggled={isParentToggled && isToggled}\n />\n ) : (\n <p\n style={{ marginLeft: 16 + \"px\" }}\n className={isToggled ? \"tree-element\" : \"tree-element collapsed\"}\n >\n {Array.isArray(data) ? \"\" : <strong>{v}: </strong>}\n {data[v]}\n {i === a.length - 1 ? \"\" : \",\"}\n </p>\n )\n )}\n {Array.isArray(data) ? \"]\" : \"}\"}\n {!isLast ? \",\" : \"\"}\n </div>\n );\n}\n```",
|
||||
"```jsx\nlet data = {\n lorem: {\n ipsum: \"dolor sit\",\n amet: {\n consectetur: \"adipiscing\",\n elit: [\n \"duis\",\n \"vitae\",\n {\n semper: \"orci\"\n },\n {\n est: \"sed ornare\"\n },\n \"etiam\",\n [\"laoreet\", \"tincidunt\"],\n [\"vestibulum\", \"ante\"]\n ]\n },\n ipsum: \"primis\"\n }\n};\nReactDOM.render(<TreeView data={data} name='data'/>, document.getElementById(\"root\"));\n```"
|
||||
],
|
||||
"expertise": 2,
|
||||
|
||||
Reference in New Issue
Block a user