React Component that provide toggle pattern
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example
src
test
.babelrc
.gitignore
.travis.yml
LICENSE
README.md
package.json
yarn.lock

README.md

react-toggle-pattern Build Status

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";
class ToggleButton extends React.Component {
    render(){
        return (
            <TogglePattern isEditing={this.props.isEditing}>
                <LeaveEditingButton isEditing={true} />
                <EnterEditingButton isEditing={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.
<ToggleOrPattern a={true}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleOrPattern>

Result to:

<div class="TogglePattern ToggleOrPattern">
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={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.
<ToggleAndPattern a={true} b={false}>
    <LeaveEditingButton a={true} b={false} />
    <EnterEditingButton a={true} />
</ToggleAndPattern>

Result to:

<LeaveEditingButton a={true} b={false} />

<EnterEditingButton /> is not and match with TogglePattern.

Example

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

const TogglePattern = require("react-toggle-pattern").TogglePattern;
// render
<TogglePattern isEditing={true}>
    <ComponentX isEditing/>
    <ComponentY />
</TogglePattern>

Result to <ComponentX />


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

<TogglePattern isEditing={false}>
    <ComponentX isEditing={true} />
    <ComponentY isEditing={false} />
</TogglePattern>

Result to <ComponentY />

Also, it is ok that value it string type.

<TogglePattern pattern="one">
    <ComponentX pattern="one"/>
    <ComponentY pattern="two"/>
</TogglePattern>

Result to <ComponentY />


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

<TogglePattern isEditing={true}>
    <ComponentX isEditing={true} />
    <ComponentX isEditing={true}/>
</TogglePattern>

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


Not show when not match

<TogglePattern isEditing={false}>
    <ComponentX isEditing={true} />
    <ComponentY />
</TogglePattern>

Result to null.


OR match

<ToggleOrPattern pattern1={1} pattern2={2}>
    <ComponentX pattern1={1} pattern2={2}/>
    <ComponentY pattern1={1}/>
</ToggleOrPattern>

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


And match

<ToggleAndPattern pattern1={1} pattern2={2}>
    <ComponentX pattern1={1} pattern2={2}/>
    <ComponentY pattern1={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

License

MIT © azu