react-toggle-pattern

React Component that provide toggle pattern

Install

Install with npm:

npm install react-toggle-pattern

Usage

react-toggle-pattern provide three components.

Insert and Remove pattens

• <TogglePattern /> or pattern. This is same with <ToggleOrPattern />
• <ToggleOrPattern /> or pattern
• <ToggleAndPattern /> and pattern

Put <YourComponent /> into <TogglePattern />.

import{TogglePattern}from"react-toggle-pattern";classToggleButtonextendsReact.Component{render(){return(<TogglePatternisEditing={this.props.isEditing}><LeaveEditingButtonisEditing={true}/><EnterEditingButtonisEditing={false}/></TogglePattern>);}}

It means that

• if this.props.isEditing is true, show <LeaveEditingButton />
• if this.props.isEditing is false, show <EnterEditingButton />
• In the other case, show null

<TogglePattern /> Interface

• <TogglePattern anyAttribute=anyValue />
  • anyAttribute is any name.
  • anyValue is any type.

<ToggleOrPattern /> and <ToggleAndPattern /> has same interface.

OR AND pattern

OR

<ToggleOrPattern /> filter child components by OR matching.

• find component that match with a is true or b is false.

<ToggleOrPatterna={true}><LeaveEditingButtona={true}b={false}/><EnterEditingButtona={true}/></ToggleOrPattern>

Result to:

<divclass="TogglePattern ToggleOrPattern"><LeaveEditingButtona={true}b={false}/><EnterEditingButtona={true}/></div>

Both components are or match with TogglePattern.

AND

<ToggleAndPattern /> filter child components by AND matching.

• find component that match with a is true and b is false.

<ToggleAndPatterna={true}b={false}><LeaveEditingButtona={true}b={false}/><EnterEditingButtona={true}/></ToggleAndPattern>

Result to:

<LeaveEditingButtona={true}b={false}/>

<EnterEditingButton /> is not and match with TogglePattern.

Example

Show component that has truly attribute with <TogglePattern attribute />

constTogglePattern=require("react-toggle-pattern").TogglePattern;// render<TogglePatternisEditing={true}><ComponentXisEditing/><ComponentY/></TogglePattern>

Result to <ComponentX />

---

Show component that match attribute and value with <TogglePattern attribute=value />

<TogglePatternisEditing={false}><ComponentXisEditing={true}/><ComponentYisEditing={false}/></TogglePattern>

Result to <ComponentY />

Also, it is ok that value it string type.

<TogglePatternpattern="one"><ComponentXpattern="one"/><ComponentYpattern="two"/></TogglePattern>

Result to <ComponentY />

---

Show components that match attribute and value with <TogglePattern attribute=value />.

<TogglePatternisEditing={true}><ComponentXisEditing={true}/><ComponentXisEditing={true}/></TogglePattern>

Result to <div class="TogglePattern ToggleOrPattern"><ComponentX /><ComponentX /></div>

---

Not show when not match

<TogglePatternisEditing={false}><ComponentXisEditing={true}/><ComponentY/></TogglePattern>

Result to null.

---

OR match

<ToggleOrPatternpattern1={1}pattern2={2}><ComponentXpattern1={1}pattern2={2}/><ComponentYpattern1={1}/></ToggleOrPattern>

Result to <div class="TogglePattern ToggleOrPattern"><div>Visible</div><div>Hidden</div></div>.

---

And match

<ToggleAndPatternpattern1={1}pattern2={2}><ComponentXpattern1={1}pattern2={2}/><ComponentYpattern1={1}/></ToggleAndPattern>

Result to <ComponentX pattern1={1} pattern2={2}/>.

Show and Hide pattern

It is an experimental pattern.

• <ToggleAndDisplayPattern />

It has same interface <ToggleAndPattern />, but it has difference logic.

• It use hidden attribute for non-showing element.
  • You should add [hidden]{ display: none!important; }; to own css.
• It always wrapped children components with <div class="ToggleAndDisplayPattern">{children}</ToggleAndDisplayPattern>

Props

• <ToggleAndDisplayPattern /> try to preserve your focus.
  • <ToggleAndPattern /> missing focus because of inserting and removing.

Cons

• Automatically wrap {this.props.children} with div element.

Changelog

See Releases page.

Running tests

Install devDependencies and Run npm test:

npm i -d && npm test

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

• github/azu
• twitter/azu_re

License

MIT © azu