Skip to content

Instantly share code, notes, and snippets.

@rdalmas
rdalmas / ButtonAction.jsx
Created December 9, 2019 16:05
Dropdown with Styled Components - used in a Pagination Component for example purposes
import styled from "@emotion/styled";
export const ButtonAction = styled.a`
display: block;
width: 50px;
height: 25px;
padding: 5px;
text-align: center;
background-color: transparent;
color: black;
@rdalmas
rdalmas / ExampleComponent.jsx
Created December 9, 2019 15:58
Search Input with Floating Selector for results
import React from "react";
import { connect } from "react-redux";
import { FloatingSelector } from "./FloatingSelector";
import { Input } from "./Input"; 
export class ExampleComponent extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
@rdalmas
rdalmas / Accordion.styled.jsx
Created December 9, 2019 13:42
Accordion component using styled components
import React from "react";
import styled from "@emotion/styled";
export const Checkbox = styled.input`
display: none;
visibility: hidden;
`;
export const Label = styled.label`
display: flex;
@rdalmas
rdalmas / reducer.js
Created December 9, 2019 10:48
Reducer with handleActions from redux-actions
import { handleActions } from "redux-actions";
import { actions as a } from "../../constants";
const defaultState = {
userId: undefined,
loading: false,
error: undefined
};
@rdalmas
rdalmas / SpacerHorizontal.jsx
Created December 9, 2019 10:37
Spacer Horizontal component - Add horizontal space to the template
import React from "react";
import { PropTypes } from "prop-types";
const sizes = {
small: 10,
medium: 20,
large: 30,
extraLarge: 50
};
@rdalmas
rdalmas / SpacerVertical.jsx
Created December 9, 2019 10:36
Spacer Vertical component - Add vertical space to the template
import React from "react";
import { PropTypes } from "prop-types";
const sizes = {
small: 10,
medium: 20,
large: 30
};
export class SpacerVertical extends React.PureComponent {
@rdalmas
rdalmas / withTopBar.jsx
Last active December 9, 2019 10:35
HOC to add Top Bar into pages - Simple example
import React from "react";
import TopBarComponent from "./TopBar";
export const withTopBar = WrappedComponent => props => {
return (
<React.Fragment>
<TopBarComponent />
<WrappedComponent {...props} />
</React.Fragment>
@rdalmas
rdalmas / LineChart.jsx
Last active December 9, 2019 13:44
SVG Line Chart with path, points, labels and axis options
import React from "react";
import {
Path,
Axis,
Label,
Points,
SmallDash,
BigDash,
MainSvg
@rdalmas
rdalmas / loading.styled.jsx
Created November 18, 2019 14:36
Loading spinner styled component
import styled from "@emotion/styled";
export const Loading = styled.div`
position: fixed;
z-index: 999;
height: 2em;
width: 2em;
overflow: visible;
margin: auto;
top: 0;
@rdalmas
rdalmas / ErrorBoundary.jsx
Last active December 9, 2019 13:46
React Error Boundary
import React from "react";
export class ErrorBoundary extends React.PureComponent {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(error, info) {
const { spy } = this.props;