nju33 / react-dou

A React's yes-no modal component

React Dou

Install

yarn add react-dou react react-dom styled-components # @types/react @types/react-dom @types/styled-components

Example

by DouFunctionsConsumer

(
  <DouProvider callback={callback}>
    <DouFunctionsConsumer>
      {({ask}) => {
        return (
          <button onClick={ask('ハンバーガー食べますか？')}>ハンバーガー食べますか？</button>
        );
      }}
    </DouFunctionsConsumer>
    <Dou />
  </DouProvider>
)

by withDou

interface Props {
  text: string;
}

class IComponent extends React.Component<
  Props & Partial<DouFunctionsProps>,
  {a: string}
> {
  // @ts-ignore
  props: Props & DouFunctionsProps
  
  render() {
    return (
      <button onClick={this.props.dou.ask('message')}>{this.props.text}</button>
    );
  }
}

const IComponentWithDou = withDou<Props>(IComponent);

References

• npm
• github

License

MIT

react-dou's Issues

Please do not set outline: 0; 😢😢😢

• react-dou/src/dou.organism/button.atom.tsx

  Line 8 in 168c040

  outline: none;

https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-focus-visible.html

If you don't like to have focus when mouse clicking ...

• Please use what-input
  • https://github.com/ten1seven/what-input
  • This is what you can give a style to when you are mouse and keyboard, and when you touch.

IE11 で Background の `overflow:hidden` が効いてない

height: 0px;
width: 0px;
overflow: hidden;

https://github.com/nju33/react-dou/blob/master/src/dou.organism/background.atom.tsx#L24-L28