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

Update snippets

Browse Source
This commit is contained in:
Isabelle Viktoria Maciohsek
2020-11-03 20:42:15 +02:00
parent 9142a60275
commit 36179e57dc
4 changed files with 84 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
snippets/Alert.md
View File

@ -3,14 +3,12 @@ title: Alert
tags: components,state,effect,beginner
---
Creates an alert component with `type` prop.
Renders an alert component with `type` prop.
- Define appropriate CSS styles and animations for the component's elements.
- Use the `React.useState()` hook to create the `isShown` and `isLeaving` state variables and set their values to `false`.
- Use the `useState()` hook to create the `isShown` and `isLeaving` state variables and set both to `false` intially.
- Define `timeoutId` to keep the timer instance for clearing on component unmount.
- Use the `React.useEffect()` hook to update the value of `isShown` to `true` and clear interval by using `timeoutId` when component is unmounted.
- Define `closeAlert` function to set the component is removed from DOM by displaying fading out animation and set `isShown` to `false` via `setTimeout()`.
- Define the component, which renders the alert component with user defined `message` and a close button to remove the component from DOM.
- Use the `useEffect()` hook to update the value of `isShown` to `true` and clear the interval by using `timeoutId` when the component is unmounted.
- Define a `closeAlert` function to set the component as removed from the DOM by displaying a fading out animation and set `isShown` to `false` via `setTimeout()`.
```css
@keyframes leave {
@ -28,19 +26,19 @@ Creates an alert component with `type` prop.
position: relative;
}
.alert.warning{
.alert.warning {
color: #856404;
background-color: #fff3cd;
border-color: #ffeeba;
}
.alert.error{
.alert.error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
.alert.leaving{
.alert.leaving {
animation: leave 0.5s forwards;
}
@ -58,7 +56,7 @@ Creates an alert component with `type` prop.
font-size: 16px;
}
.alert .close:after{
.alert .close:after {
content: 'x';
}
```
@ -85,15 +83,23 @@ const Alert = ({ isDefaultShown = false, timeout = 250, type, message }) => {
}, timeout);
};
return isShown && (
<div className={`alert ${type} ${isLeaving ? 'leaving' : ''}`} role="alert">
return (
isShown && (
<div
className={`alert ${type} ${isLeaving ? 'leaving' : ''}`}
role="alert"
>
<button className="close" onClick={closeAlert} />
{message}
</div>
)
);
};
```
```jsx
ReactDOM.render(<Alert type="info" message="This is info" />, document.getElementById('root'));
ReactDOM.render(
<Alert type="info" message="This is info" />,
document.getElementById('root')
);
```

19
snippets/AutoLink.md
View File

@ -1,28 +1,31 @@
---
title: AutoLink
tags: components,string,fragment,regexp,advanced
tags: components,fragment,regexp,intermediate
---
Renders a string as plaintext, with URLs converted to appropriate `<a>` elements.
Renders a string as plaintext, with URLs converted to appropriate link elements.
- Use `String.prototype.split()` and `String.prototype.match()` with a regular expression to find URLs in a string.
- Return a `<React.Fragment>` with matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary, and the rest of the string rendered as plaintext.
- Return matched URLs rendered as `<a>` elements, dealing with missing protocol prefixes if necessary.
- Render the rest of the string as plaintext.
```jsx
const AutoLink = ({ text }) => {
const delimiter = /((?:https?:\/\/)?(?:(?:[a-z0-9]?(?:[a-z0-9\-]{1,61}[a-z0-9])?\.[^\.|\s])+[a-z\.]*[a-z]+|(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3})(?::\d{1,5})*[a-z0-9.,_\/~#&=;%+?\-\\(\\)]*)/gi;
return (
<React.Fragment>
<>
{text.split(delimiter).map(word => {
let match = word.match(delimiter);
const match = word.match(delimiter);
if (match) {
let url = match[0];
return <a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>;
const url = match[0];
return (
<a href={url.startsWith('http') ? url : `http://${url}`}>{url}</a>
);
}
return word;
})}
</React.Fragment>
</>
);
};
```

48
snippets/Carousel.md
View File

@ -1,32 +1,35 @@
---
title: Carousel
tags: components,children,state,effect,intermediate
tags: components,children,state,effect,advanced
---
Renders a carousel component.
- Use the `React.useState()` 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.
- Use the `React.useEffect()` 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.
- Use the `useState()` hook to create the `active` state variable and give it a value of `0` (index of the first item).
- Use the `useEffect()` hook to update the value of `active` to the index of the next item, using `setTimeout`.
- Compute the `className` for each carousel item while mapping over them and applying it accordingly.
- Render the carousel items using `React.cloneElement()` and pass down `...rest` along with the computed `className`.
```css
.carousel {
position: relative;
}
.carousel-item {
position: absolute;
visibility: hidden;
}
.carousel-item.visible {
visibility: visible;
}
```
```jsx
const Carousel = ({ carouselItems, ...rest }) => {
const [active, setActive] = React.useState(0);
let scrollInterval = null;
const style = {
carousel: {
position: 'relative'
},
carouselItem: {
position: 'absolute',
visibility: 'hidden'
},
visible: {
visibility: 'visible'
}
};
React.useEffect(() => {
scrollInterval = setTimeout(() => {
setActive((active + 1) % carouselItems.length);
@ -35,15 +38,12 @@ const Carousel = ({ carouselItems, ...rest }) => {
});
return (
<div style={style.carousel}>
<div className="carousel">
{carouselItems.map((item, index) => {
const activeStyle = active === index ? style.visible : {};
const activeClass = active === index ? ' visible' : '';
return React.cloneElement(item, {
...rest,
style: {
...style.carouselItem,
...activeStyle
}
className: `carousel-item${activeClass}`
});
})}
</div>

51
snippets/Collapse.md
View File

@ -1,46 +1,49 @@
---
title: Collapse
tags: components,children,state,intermediate
tags: components,children,state,beginner
---
Renders a component with collapsible content.
- Use the `React.useState()` hook to create the `isCollapsed` state variable with an initial value of `collapsed`.
- Use an object, `style`, to hold the styles for individual components and their states.
- Use a `<div>` to wrap both the `<button>` that alters the component's `isCollapsed` state and the content of the component, passed down via `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.
- Use the `useState()` hook to create the `isCollapsed` state variable with an initial value of `collapsed`.
- Use the `<button>` to change the component's `isCollapsed` state and the content of the component, passed down via `children`.
- Determine the appearance of the content, based on `isCollapsed` and apply the appropriate `className`.
- Update the value of the `aria-expanded` attribute based on `isCollapsed` to make the component accessible.
```css
.collapse-button {
display: block;
width: 100%;
}
.collapse-content.collapsed {
display: none;
}
.collapsed-content.expanded {
display: block;
}
```
```jsx
const Collapse = ({ collapsed, children }) => {
const [isCollapsed, setIsCollapsed] = React.useState(collapsed);
const style = {
collapsed: {
display: 'none'
},
expanded: {
display: 'block'
},
buttonStyle: {
display: 'block',
width: '100%'
}
};
return (
<div>
<button style={style.buttonStyle} onClick={() => setIsCollapsed(!isCollapsed)}>
<>
<button
className="collapse-button"
onClick={() => setIsCollapsed(!isCollapsed)}
>
{isCollapsed ? 'Show' : 'Hide'} content
</button>
<div
className="collapse-content"
style={isCollapsed ? style.collapsed : style.expanded}
className={`collapse-content ${isCollapsed ? 'collapsed' : 'expanded'}`}
aria-expanded={isCollapsed}
>
{children}
</div>
</div>
</>
);
};
```