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 />
.
;Component { return <TogglePattern isEditing=thispropsisEditing> <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:
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:
<EnterEditingButton />
is not and match with TogglePattern.
Example
Show component that has truly attribute with <TogglePattern attribute />
const TogglePattern = 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