Reclick NPM | npm.io

Reclick 👆

Clicking Menu in React made simpler!

npm.io

Install

yarn add reclick

Usage

React v16.0 required, rendering arrays in render method.

import React from "react";
import Reclick from "reclick";

<Reclick>
  <button source>Click me!</button>
  <div destination>
    <a href="#">A</a>
    <a href="#">B</a>
    <a href="#">C</a>
  </div>
</Reclick>

Reclick is using the ref, to determine what have to be shown on the screen, since ref could be little tricky to get due to nested children components, so we let you the possibility to pass as props, the refs (source, destination).

For example, Reclick can't determine the correct ref when using a CSS-IN-JS library, such as styled-components with the innerRef.

So, you can do this to make it work:

React, ref forwarding:

const FancyButton = React.forwardRef((props, ref) => (
  <button ref={ref} className="FancyButton" {...props}>
    {props.children}
  </button>
));

Using styled-components as an example:

import styled from "styled-components"

const Styled = styled.div`
  border: 2px solid green;
`;

const FancyDiv = React.forwardRef((props, ref) => (
  <Styled innerRef={ref} {...props}>
    Im a div with some fancy borders!
  </Styled>
));

Then:

this.refsource = React.createRef();
this.refdest = React.createRef();
...
<ReClick refsrc={this.refsource.current} refdest={this.refdest.current}>
  <FancyDiv ref={this.refsource} source>
    Click me!
  </FancyDiv>
  <FancyButton ref={this.refdest} destination>
    Im now visible!
  </FancyButton>
</ReClick>

By default, if no props are passed, Reclick will try to get the ref alone.

API/Props

Setting	Default	Type	Role
states	`undefined`	func	Props function that give you the state `isOpen`, to let you construct animation for example.
refsrc	`undefined`	node	Give the ref of the source element if you are using a custom component as described above
refdest	`undefined`	node	Give the ref of the destination element if you are using a custom component as described above