Skip to content

Instantly share code, notes, and snippets.

@rhostem
rhostem / machine.js
Created November 19, 2021 16:15
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@rhostem
rhostem / CircleSpinner.js
Created October 22, 2018 03:00
[react] circle spinner
import React from 'react'
import styled from 'styled-components'
import { pTr } from '../../styles/typography'
/**
* http://tobiasahlin.com/spinkit/
*/
const CubeSpinnerContainer = styled.div`
position: ${({ isAbsolute }) => (isAbsolute ? 'absolute' : 'fixed')};
top: 50%;
@rhostem
rhostem / RadioGroup.js
Created October 17, 2018 07:49
[React] radio group (text or input in label tag)
import React from 'react'
import styled from 'styled-components'
import { mixin } from 'styles'
const Wrap = styled.div`
${mixin.clearFix()};
font-size: 14px;
&:not(:last-child) {
margin-right: 27px;
@rhostem
rhostem / CheckBox.js
Created October 17, 2018 06:35
[React] form components set
import * as React from 'react'
import styled from 'styled-components'
import { color, mixin } from 'styles'
const CheckBoxGroup = styled.div`
display: inline-flex;
align-items: center;
& > input {
display: none;
@rhostem
rhostem / SlideInFromBottom.js
Created October 12, 2018 03:24
[react] transition - SlideInFromBottom
import React, { Component } from 'react'
import { Transition } from 'react-transition-group'
type Props = {
in: boolean,
keyProp: string,
duration: number,
style?: any,
initialTop: string, // entering 시작할 때 top 값
}
@rhostem
rhostem / SlideInFromRight.js
Created October 12, 2018 02:59
[React] transition - SlideInFromRight
import React, { Component } from 'react'
import { Transition } from 'react-transition-group'
const defaultDuration = 400
const initialRight = '-1024px'
const enteredRight = '0'
const defaultStyle = {
position: 'relative',
transition: `all ${defaultDuration}ms ease-in-out`,
@rhostem
rhostem / FadeIn.js
Last active October 12, 2018 03:00
[React] transition - fadein wrapper
import React, { Component } from 'react'
import { Transition } from 'react-transition-group'
const defaultDuration = 400
const defaultStyle = {
transition: `opacity ${defaultDuration}ms ease-in-out`,
opacity: 0,
}
@rhostem
rhostem / hiddenInput.jsx
Last active October 11, 2018 08:18
[react] trigger click hidden input
import React, { Component } from "react";
class AddImage extends Component {
constructor(props) {
super(props);
this.fileUpload = React.createRef();
this.showFileUpload = this.showFileUpload.bind(this);
}
showFileUpload() {
this.fileUpload.current.click();
}
@rhostem
rhostem / Input.js
Last active October 3, 2018 05:56
[React] input component (with icon, style, etc)
import React from 'react'
import styled from 'styled-components'
const Wrap = styled.div`
display: block;
width: 100%;
background-color: #ffffff;
border: solid 1px #dee0e4;
padding: 10px 12px;
font-size: 12px;
@rhostem
rhostem / Alert.js
Last active July 26, 2019 17:27
[React] Alert, Confirm with react-modal, i18n, styled-components
import React from 'react'
import ReactModal from 'react-modal'
import styled from 'styled-components'
import { I18n } from 'react-i18next'
import { mixin } from 'styles'
const MODAL_BODY_WIDTH = '500px'
const ModalBody = styled.div`
position: relative;