andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update snippet descriptions

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2020-11-25 20:46:35 +02:00
parent 9d9032fda7
commit f90d8359f3
6 changed files with 81 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
snippets/Accordion.md
View File

@ -8,7 +8,7 @@ Renders an accordion menu with multiple collapsible content elements.
- Define an `AccordionItem` component, that renders a `<button>` which is used to update the component and notify its parent via the `handleClick` callback.
- Use the `isCollapsed` prop in `AccordionItem` to determine its appearance and set an appropriate `className`.
- Define an `Accordion` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
- Filter `children` to remove unnecessary nodes expect for `AccordionItem` by identifying the function's name.
- Filter `children` to remove unnecessary nodes except for `AccordionItem` by identifying the function's name.
- Use `Array.prototype.map()` on the collected nodes to render the individual collapsiple elements.
- Define `changeItem`, which will be executed when clicking an `AccordionItem`'s `<button>`.
- `changeItem` executes the passed callback, `onItemClick`, and updates `bindIndex` based on the clicked element.

11
snippets/PasswordRevealer.md
View File

@ -5,18 +5,17 @@ tags: components,input,state,beginner
Renders a password input field with a reveal button.
- Use the `React.useState()` hook to create the `shown` state variable 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"`.
- Use the `useState()` hook to create the `shown` state variable and set its value to `false`.
- When the `<button>` is clicked, execute `setShown`, toggling the `type` of the `<input>` between `"text"` and `"password"`.
```jsx
const PasswordRevealer = ({ value }) => {
const [shown, setShown] = React.useState(false);
return (
<div>
<input type={shown ? 'text' : 'password'} value={value} onChange={() => {}} />
<>
<input type={shown ? 'text' : 'password'} value={value} />
<button onClick={() => setShown(!shown)}>Show/Hide</button>
</div>
</>
);
};
```

29
snippets/Select.md
View File

@ -3,24 +3,23 @@ title: Select
tags: components,input,beginner
---
Renders a `<select>` element that uses a callback function to pass its value to the parent component.
Renders an uncontrolled `<select>` element that uses a callback function to pass its value to the parent component.
- Use object destructuring to set defaults for certain attributes of the `<select>` element.
- Render a `<select>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
- Use the `selected` attribute to define the `defaultValue` of the `<select>` element.
- Use destructuring on the `values` array to pass an array of `value` and `text` elements.
- Use the the `selectedValue` prop as the `defaultValue` of the `<select>` element to set its initial value..
- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
- Use `Array.prototype.map()` on the `values` array to create an `<option>` element for each passed value.
- Each item in `values` must be a 2-element array, where the first element is the `value` of the item and the second one is the displayed text for it.
```jsx
const Select = ({ values, callback, disabled = false, readonly = false, selected }) => {
const Select = ({ values, onValueChange, selectedValue, ...rest }) => {
return (
<select
disabled={disabled}
readOnly={readonly}
defaultValue={selected}
onChange={({ target: { value } }) => callback(value)}
defaultValue={selectedValue}
onChange={({ target: { value } }) => onValueChange(value)}
{...rest}
>
{values.map(([value, text]) => (
<option value={value}>
<option key={value} value={value}>
{text}
</option>
))}
@ -34,10 +33,14 @@ const choices = [
['grapefruit', 'Grapefruit'],
['lime', 'Lime'],
['coconut', 'Coconut'],
['mango', 'Mango']
['mango', 'Mango'],
];
ReactDOM.render(
<Select values={choices} selected="lime" callback={val => console.log(val)} />,
<Select
values={choices}
selectedValue="lime"
onValueChange={val => console.log(val)}
/>,
document.getElementById('root')
);
```

28
snippets/Slider.md
View File

@ -3,24 +3,36 @@ title: Slider
tags: components,input,beginner
---
Renders a slider element that uses a callback function to pass its value to the parent component.
Renders an uncontrolled range input element that uses a callback function to pass its value to the parent component.
- Use object destructuring to set defaults for certain attributes of the `<input>` element.
- Render an `<input>` element of type `"range"` and the appropriate attributes, use the `callback` function in the `onChange` event to pass the value of the input to the parent.
- Set the `type` of the `<input>` element to `"range"` to create a slider.
- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
```jsx
const Slider = ({ callback, disabled = false, readOnly = false }) => {
const Slider = ({
min = 0,
max = 100,
defaultValue,
onValueChange,
...rest
}) => {
return (
<input
type="range"
disabled={disabled}
readOnly={readOnly}
onChange={({ target: { value } }) => callback(value)}
min={min}
max={max}
defaultValue={defaultValue}
onChange={({ target: { value } }) => onValueChange(value)}
{...rest}
/>
);
};
```
```jsx
ReactDOM.render(<Slider callback={val => console.log(val)} />, document.getElementById('root'));
ReactDOM.render(
<Slider onValueChange={val => console.log(val)} />,
document.getElementById('root')
);
```

39
snippets/Tabs.md
View File

@ -5,11 +5,11 @@ tags: components,state,children,intermediate
Renders a tabbed menu and view component.
- Define a `TabItem` component, pass it to the `Tab` and remove unnecessary nodes expect for `TabItem` by identifying the function's name in `children`.
- Use the `React.useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
- Use `Array.prototype.map()` on the collected nodes to render the `tab-menu` and `tab-view`.
- Define `changeTab`, which will be executed when clicking a `<button>` from the `tab-menu`.
- `changeTab` executes the passed callback, `onTabClick` and updates `bindIndex`, which in turn causes a re-render, evaluating the `style` and `className` of the `tab-view` items and `tab-menu` buttons according to their `index`.
- Define a `Tabs` component that uses the `useState()` hook to initialize the value of the `bindIndex` state variable to `defaultIndex`.
- Define a `TabItem` component and filter `children` passed to the `Tabs` component to remove unnecessary nodes except for `TabItem` by identifying the function's name.
- Define `changeTab`, which will be executed when clicking a `<button>` from the menu.
- `changeTab` executes the passed callback, `onTabClick`, and updates `bindIndex` based on the clicked element.
- Use `Array.prototype.map()` on the collected nodes to render the menu and view of the tabs, using the value of `binIndex` to determine the active tab and apply the correct `className`.
```css
.tab-menu > button {
@ -19,23 +19,31 @@ Renders a tabbed menu and view component.
border-bottom: 2px solid transparent;
background: none;
}
.tab-menu > button.focus {
border-bottom: 2px solid #007bef;
}
.tab-menu > button:hover {
border-bottom: 2px solid #007bef;
}
.tab-content {
display: none;
}
.tab-content.selected {
display: block;
}
```
```jsx
const TabItem = props => {
return <div {...props} />;
};
const TabItem = props => <div {...props} />;
const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
const [bindIndex, setBindIndex] = React.useState(defaultIndex);
const changeTab = newIndex => {
if (typeof onTabClick === 'function') onTabClick(newIndex);
if (typeof onItemClick === 'function') onItemClick(itemIndex);
setBindIndex(newIndex);
};
const items = children.filter(item => item.type.name === 'TabItem');
@ -44,7 +52,11 @@ const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
<div className="wrapper">
<div className="tab-menu">
{items.map(({ props: { index, label } }) => (
<button onClick={() => changeTab(index)} className={bindIndex === index ? 'focus' : ''}>
<button
key={`tab-btn-${index}`}
onClick={() => changeTab(index)}
className={bindIndex === index ? 'focus' : ''}
>
{label}
</button>
))}
@ -53,9 +65,10 @@ const Tabs = ({ defaultIndex = 0, onTabClick, children }) => {
{items.map(({ props }) => (
<div
{...props}
className="tab-view_item"
key={props.index}
style={{ display: bindIndex === props.index ? 'block' : 'none' }}
className={`tab-content ${
bindIndex === props.index ? 'selected' : ''
}`}
key={`tab-content-${props.index}`}
/>
))}
</div>

25
snippets/TextArea.md
View File

@ -3,28 +3,26 @@ title: TextArea
tags: components,input,beginner
---
Renders a `<textarea>` element that uses a callback function to pass its value to the parent component.
Renders an uncontrolled `<textarea>` element that uses a callback function to pass its value to the parent component.
- Use object destructuring to set defaults for certain attributes of the `<textarea>` element.
- Render a `<textarea>` element with the appropriate attributes and use the `callback` function in the `onChange` event to pass the value of the textarea to the parent.
- Use the `defaultValue` passed down from the parent as the uncontrolled input field's initial value.
- Use the `onChange` event to fire the `onValueChange` callback and send the new value to the parent.
```jsx
const TextArea = ({
callback,
cols = 20,
rows = 2,
disabled = false,
readOnly = false,
placeholder = ''
defaultValue,
onValueChange,
...rest
}) => {
return (
<textarea
cols={cols}
rows={rows}
disabled={disabled}
readOnly={readOnly}
placeholder={placeholder}
onChange={({ target: { value } }) => callback(value)}
defaultValue={defaultValue}
onChange={({ target: { value } }) => onValueChange(value)}
{...rest}
/>
);
};
@ -32,7 +30,10 @@ const TextArea = ({
```jsx
ReactDOM.render(
<TextArea placeholder="Insert some text here..." callback={val => console.log(val)} />,
<TextArea
placeholder="Insert some text here..."
onValueChange={val => console.log(val)}
/>,
document.getElementById('root')
);
```