mrcthms

function MyComponent() {
  return null;
}

function MySettingsList() {
  return (
    <SettingsList action={{ content: 'Click me' }}>
      <MyComponent />
    </SettingsList>
  )

mrcthms

import { Dropdown } from '@invisionapp/helios'
import { useState } from 'react'

function Component(props) {
  const [isOpen, setIsOpen] = useState(false)
  
  const handleToggleVisibility = () => {
    setIsOpen(!isOpen)
  }
  

mrcthms

function C() {
  const [open, setOpen] = useState(false)
  return (
    <>
      <Tooltip {..props} open={open} onChangeVisibility={setOpen} />
      <button onClick={() => setOpen(!open)}>I will toggle the Tooltip</button>
    </>
  )
}

mrcthms

function C() {
  return (
    <>
      <Tooltip {...props } />
      <button>I am an entirely different element that when clicked will open the Tooltip</button>
    </>
  )
}

mrcthms

.wrapper {
  height: 36px;
  width: 100%;
  position: relative;
}

.inner {
  position: absolute;
  right: 0;
  top: 0;

mrcthms

class MyComponent extends Component {
  componentDidMount() {
    this.doSideEffect(this.props.foo)
  }
  
  componentDidUpdate(prev) {
    if (prev.foo !== this.props.foo) {
      this.doSideEffect(this.props.foo)
    }

mrcthms

import React, { ReactNode, ElementType } from 'react'
import cx from 'classnames'
import getTag from '../../helpers/getTag'
import { Omit, HTMLProps } from '../../helpers/omitType'

export const colors = [
  'constants-white',
  'constants-black',
  'text-0',
  'text-20',

mrcthms

import styled from 'styled-components'
import { Text } from '@invisionapp/helios'

export const Root = styled(({ forceRender, ...props } => <Text {...props />)`
  background: ${({ forceRender }) => forceRender ? 'red' : 'white'}
`

mrcthms

:root {
  --hds-spacing-1: 4px;
  --hds-spacing-2: 8px;
  /* etc */
}

.hds-theme-light {
  --hds-palette-primary-100: #ff3366;
}

mrcthms

import React, { useState } from 'react'
import { Textarea } from '@invisionapp/helios'

function MyComponent() {
  const [value, setValue] = useState('')
  
  function handleChange(evt) {
    setValue(evt.target.value)
  }