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
istrue
, show<LeaveEditingButton />
- if
this.props.isEditing
isfalse
, 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
istrue
orb
isfalse
.
<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
istrue
andb
isfalse
.
<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.
- You should add
- 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}
withdiv
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.
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
License
MIT © azu