Update README
This commit is contained in:
Angelos Chalaris
408
README.md
408
README.md
@ -243,41 +243,36 @@ ReactDOM.render(
|
||||
|
||||
Renders a textarea component with a character limit.
|
||||
|
||||
Use 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`.
|
||||
Create 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.
|
||||
In 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.
|
||||
Use the `React.useState()` hook to create the `content` state variable and set its value to `value`.
|
||||
Create a method `setFormattedContent`, which trims the content of the input if it's longer than `limit`.
|
||||
Use the `React.useEffect()` hook to call the `setFormattedContent` method on the value of the `content` state variable.
|
||||
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 call `setFormattedContent` with the value of `event.target.value`.
|
||||
|
||||
```jsx
|
||||
class LimitedTextarea extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
content: props.value,
|
||||
characterCount: props.value.length,
|
||||
limit: props.limit
|
||||
};
|
||||
this.handleChange = this.handleChange.bind(this);
|
||||
}
|
||||
|
||||
handleChange(event) {
|
||||
let newContent = event.target.value;
|
||||
if(newContent.length >= this.state.limit) newContent = newContent.slice(0, this.state.limit);
|
||||
this.setState(state => ({ content: newContent, characterCount: newContent.length }));
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<textarea
|
||||
rows={this.props.rows}
|
||||
cols={this.props.cols}
|
||||
onChange={this.handleChange}
|
||||
value={this.state.content}
|
||||
>
|
||||
</textarea>
|
||||
<p>{this.state.characterCount}/{this.props.limit}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
function LimitedTextarea({ rows, cols, value, limit }) {
|
||||
const [content, setContent] = React.useState(value);
|
||||
|
||||
const setFormattedContent = text => {
|
||||
text.length > limit ? setContent(text.slice(0, limit)) : setContent(text);
|
||||
};
|
||||
|
||||
React.useEffect(() => {
|
||||
setFormattedContent(content);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<textarea
|
||||
rows={rows}
|
||||
cols={cols}
|
||||
onChange={event => setFormattedContent(event.target.value)}
|
||||
value={content}
|
||||
/>
|
||||
<p>
|
||||
{content.length}/{limit}
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -298,36 +293,23 @@ ReactDOM.render(
|
||||
|
||||
Renders a password input field with a reveal button.
|
||||
|
||||
Initially set `state.shown` to `false` to ensure that the password is not shown by default.
|
||||
Create 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.
|
||||
In the`render()` method, use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field.
|
||||
Finally, bind the `<button>`'s `onClick` event to the `toggleShown` method.
|
||||
Use the `React.useState()` hook to create the `shown` state vairable and set its value to `false`.
|
||||
Use a`<div>` to wrap both the`<input>` and the `<button>` element that toggles the type of the input field between `"text"` and `"password"`.
|
||||
|
||||
```jsx
|
||||
class PasswordRevealer extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
shown: false
|
||||
};
|
||||
this.toggleShown = this.toggleShown.bind(this);
|
||||
}
|
||||
function PasswordRevealer({ value }) {
|
||||
const [shown, setShown] = React.useState(false);
|
||||
|
||||
toggleShown() {
|
||||
this.setState(state => ({ shown: !state.shown }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type={this.state.shown ? 'text' : 'password'}
|
||||
value={this.props.value}
|
||||
/>
|
||||
<button onClick={this.toggleShown}>Show/Hide</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type={shown ? "text" : "password"}
|
||||
value={value}
|
||||
onChange={() => {}}
|
||||
/>
|
||||
<button onClick={() => setShown(!shown)}>Show/Hide</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -423,13 +405,12 @@ ReactDOM.render(
|
||||
|
||||
Renders a tree view of a JSON object or array with collapsible content.
|
||||
|
||||
Use `defaultProps` to set the default values of certain props.
|
||||
Use object destructuring to set defaults for certain props.
|
||||
Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
|
||||
Set the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.
|
||||
Create a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
|
||||
In the `render()` method, use a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `state`.
|
||||
Determine the appearance of the component, based on `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`.
|
||||
For each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.
|
||||
Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
|
||||
Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
|
||||
Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.
|
||||
For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
|
||||
Otherwise, render a `<p>` element with the appropriate style.
|
||||
|
||||
```css
|
||||
@ -469,76 +450,53 @@ div.tree-element:before {
|
||||
```
|
||||
|
||||
```jsx
|
||||
class TreeView extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
toggled: props.toggled
|
||||
};
|
||||
this.toggle = this.toggle.bind(this);
|
||||
}
|
||||
function TreeView({
|
||||
data,
|
||||
toggled = true,
|
||||
name = null,
|
||||
isLast = true,
|
||||
isChildElement = false,
|
||||
isParentToggled = true
|
||||
}) {
|
||||
const [isToggled, setIsToggled] = React.useState(toggled);
|
||||
|
||||
toggle() {
|
||||
this.setState(state => ({ toggled: !state.toggled }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
style={{ marginLeft: this.props.isChildElement ? 16 : 4 + "px" }}
|
||||
className={
|
||||
this.props.isParentToggled ? "tree-element" : "tree-element collapsed"
|
||||
}
|
||||
>
|
||||
<span
|
||||
className={this.state.toggled ? "toggler" : "toggler closed"}
|
||||
onClick={this.toggle}
|
||||
/>
|
||||
{this.props.name ? (
|
||||
<strong> {this.props.name}: </strong>
|
||||
) : (
|
||||
<span> </span>
|
||||
)}
|
||||
{Array.isArray(this.props.data) ? "[" : "{"}
|
||||
{!this.state.toggled && "..."}
|
||||
{Object.keys(this.props.data).map(
|
||||
(v, i, a) =>
|
||||
typeof this.props.data[v] == "object" ? (
|
||||
<TreeView
|
||||
data={this.props.data[v]}
|
||||
isLast={i === a.length - 1}
|
||||
name={Array.isArray(this.props.data) ? null : v}
|
||||
isChildElement
|
||||
isParentToggled={
|
||||
this.props.isParentToggled && this.state.toggled
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<p
|
||||
style={{ marginLeft: 16 + "px" }}
|
||||
className={
|
||||
this.state.toggled ? "tree-element" : "tree-element collapsed"
|
||||
}
|
||||
>
|
||||
{Array.isArray(this.props.data) ? "" : <strong>{v}: </strong>}
|
||||
{this.props.data[v]}
|
||||
{i === a.length - 1 ? "" : ","}
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
{Array.isArray(this.props.data) ? "]" : "}"}
|
||||
{!this.props.isLast ? "," : ""}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
TreeView.defaultProps = {
|
||||
isLast: true,
|
||||
toggled: true,
|
||||
name: null,
|
||||
isChildElement: false,
|
||||
isParentToggled: true
|
||||
return (
|
||||
<div
|
||||
style={{ marginLeft: isChildElement ? 16 : 4 + "px" }}
|
||||
className={isParentToggled ? "tree-element" : "tree-element collapsed"}
|
||||
>
|
||||
<span
|
||||
className={isToggled ? "toggler" : "toggler closed"}
|
||||
onClick={() => setIsToggled(!isToggled)}
|
||||
/>
|
||||
{name ? <strong> {name}: </strong> : <span> </span>}
|
||||
{Array.isArray(data) ? "[" : "{"}
|
||||
{!isToggled && "..."}
|
||||
{Object.keys(data).map(
|
||||
(v, i, a) =>
|
||||
typeof data[v] == "object" ? (
|
||||
<TreeView
|
||||
data={data[v]}
|
||||
isLast={i === a.length - 1}
|
||||
name={Array.isArray(data) ? null : v}
|
||||
isChildElement
|
||||
isParentToggled={isParentToggled && isToggled}
|
||||
/>
|
||||
) : (
|
||||
<p
|
||||
style={{ marginLeft: 16 + "px" }}
|
||||
className={isToggled ? "tree-element" : "tree-element collapsed"}
|
||||
>
|
||||
{Array.isArray(data) ? "" : <strong>{v}: </strong>}
|
||||
{data[v]}
|
||||
{i === a.length - 1 ? "" : ","}
|
||||
</p>
|
||||
)
|
||||
)}
|
||||
{Array.isArray(data) ? "]" : "}"}
|
||||
{!isLast ? "," : ""}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -623,70 +581,49 @@ ReactDOM.render(
|
||||
|
||||
Renders a carousel component.
|
||||
|
||||
Initially set `state.active` to `0` (index of the first item).
|
||||
Use the `React.setState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
|
||||
Use an object, `style`, to hold the styles for the individual components.
|
||||
Define a method, `setActiveItem`, which uses `this.setState` to change the state's `active` property to the index of the next item.
|
||||
Define another method, `changeItem`, which is called by `setActiveItem` after updating the state each time and also when the component
|
||||
first renders (on `ComponentDidMount`).
|
||||
In 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.
|
||||
Render the carousel items using [React.cloneElement](https://reactjs.org/docs/react-api.html#cloneelement) and pass down rest
|
||||
`props` along with the computed styles.
|
||||
Use the `React.setEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
|
||||
Destructure `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.
|
||||
Render the carousel items using `React.cloneElement()` and pass down rest `props` along with the computed styles.
|
||||
|
||||
```jsx
|
||||
class Carousel extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
active: 0
|
||||
};
|
||||
this.scrollInterval = null;
|
||||
this.style = {
|
||||
carousel: {
|
||||
position: "relative"
|
||||
},
|
||||
carouselItem: {
|
||||
position: "absolute",
|
||||
visibility: "hidden"
|
||||
},
|
||||
visible: {
|
||||
visibility: "visible"
|
||||
}
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
this.changeItem();
|
||||
}
|
||||
setActiveItem = () => {
|
||||
const { carouselItems } = this.props;
|
||||
this.setState(
|
||||
prevState => ({
|
||||
active: (prevState.active + 1) % carouselItems.length
|
||||
}),
|
||||
this.changeItem
|
||||
);
|
||||
function Carousel(props) {
|
||||
const [active, setActive] = React.useState(0);
|
||||
let scrollInterval = null;
|
||||
const style = {
|
||||
carousel: {
|
||||
position: "relative"
|
||||
},
|
||||
carouselItem: {
|
||||
position: "absolute",
|
||||
visibility: "hidden"
|
||||
},
|
||||
visible: {
|
||||
visibility: "visible"
|
||||
}
|
||||
};
|
||||
changeItem = () => {
|
||||
this.scrollInterval = setTimeout(this.setActiveItem, 2000);
|
||||
};
|
||||
render() {
|
||||
const { carouselItems, ...rest } = this.props;
|
||||
const { active } = this.state;
|
||||
const { visible, carousel, carouselItem } = this.style;
|
||||
return (
|
||||
<div style={carousel}>
|
||||
{carouselItems.map((item, index) => {
|
||||
const activeStyle = active === index ? visible : {};
|
||||
return React.cloneElement(item, {
|
||||
...rest,
|
||||
style: {
|
||||
...carouselItem,
|
||||
...activeStyle
|
||||
}
|
||||
});
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
React.useEffect(() => {
|
||||
scrollInterval = setTimeout(() => {
|
||||
const { carouselItems } = props;
|
||||
setActive((active + 1) % carouselItems.length);
|
||||
}, 2000);
|
||||
});
|
||||
const { carouselItems, ...rest } = props;
|
||||
return (
|
||||
<div style={style.carousel}>
|
||||
{carouselItems.map((item, index) => {
|
||||
const activeStyle = active === index ? style.visible : {};
|
||||
return React.cloneElement(item, {
|
||||
...rest,
|
||||
style: {
|
||||
...style.carouselItem,
|
||||
...activeStyle
|
||||
}
|
||||
});
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
@ -713,55 +650,46 @@ ReactDOM.render(
|
||||
|
||||
Renders a component with collapsible content.
|
||||
|
||||
Use the value of the `collapsed` prop to determine the initial state of the content (collapsed/expanded).
|
||||
Set 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.
|
||||
Use the `React.setState()` hook to create the `isCollapsed` state variable with an initial value of `props.collapsed`.
|
||||
Use an object, `style`, to hold the styles for individual components and their states.
|
||||
Create a method, `toggleCollapse`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
|
||||
In 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`.
|
||||
Determine the appearance of the content, based on `state.collapsed` and apply the appropriate CSS rules from the `style` object.
|
||||
Finally, update the value of the `aria-expanded` attribute based on `state.collapsed` to make the component accessible.
|
||||
Use 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`.
|
||||
Determine the appearance of the content, based on `isCollapsed` and apply the appropriate CSS rules from the `style` object.
|
||||
Finally, update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
|
||||
|
||||
```jsx
|
||||
class Collapse extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
collapsed: !!props.collapsed
|
||||
};
|
||||
this.style = {
|
||||
collapsed: {
|
||||
display: 'none'
|
||||
},
|
||||
expanded: {
|
||||
display: 'block'
|
||||
},
|
||||
buttonStyle: {
|
||||
display: 'block',
|
||||
width: '100%'
|
||||
}
|
||||
};
|
||||
this.toggleCollapse = this.toggleCollapse.bind(this);
|
||||
}
|
||||
|
||||
toggleCollapse() {
|
||||
this.setState(state => ({ collapsed: !state.collapsed }));
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<button style={this.style.buttonStyle} onClick={this.toggleCollapse}>
|
||||
{this.state.collapsed ? 'Show' : 'Hide'} content
|
||||
</button>
|
||||
<div
|
||||
style= {this.state.collapsed ? this.style.collapsed : this.style.expanded}
|
||||
aria-expanded = {this.state.collapsed}
|
||||
>
|
||||
{this.props.children}
|
||||
</div>
|
||||
function Collapse(props) {
|
||||
const [isCollapsed, setIsCollapsed] = React.useState(props.collapsed);
|
||||
|
||||
const style = {
|
||||
collapsed: {
|
||||
display: "none"
|
||||
},
|
||||
expanded: {
|
||||
display: "block"
|
||||
},
|
||||
buttonStyle: {
|
||||
display: "block",
|
||||
width: "100%"
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button
|
||||
style={style.buttonStyle}
|
||||
onClick={() => setIsCollapsed(!isCollapsed)}
|
||||
>
|
||||
{isCollapsed ? "Show" : "Hide"} content
|
||||
</button>
|
||||
<div
|
||||
className="collapse-content"
|
||||
style={isCollapsed ? style.collapsed : style.expanded}
|
||||
aria-expanded={isCollapsed}
|
||||
>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
@ -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