@times-components/user-state v0.5.32
UserState (Web Only)
Selectively render react components based on current user state.
Selectively rendering components based on the state the user is in (subscriber, RA, RA Expired, Shared, Guest) is a common requirement across our packages.
There is also currently some complexity with managing this as the server and client sometimes disagree about what state a user is in. We handle this internally, by using a technique known as two-pass rendering. This is an implementation detail, and this could change at any time.
To deal with user states, we provide a reusable React component which allows you to render some children if you're in a specified user state, or a fallback if not.
You can use it as follows.
import UserState from "@times-components/user-state";
<UserState
state={UserState.subscriber}
fallback={<div>Will only render for non-subscribers</div>}
serverRender={
/* Control whether you want this to render on the server at all */
}
>
// Anything you only want to render for subscribers
<div>Will only render for subscribers</div>
</UserState>;
The state
property is simply a matcher function that gets passed the current user
state and returns true/false to decide whether to return the children or
the fallback.
// In the test file
import { mockUserState } from "@times-components/user-state";
const UserState = mockUserState();
UserState.mockStates = [
// Any of the matcher functions you want to evaluate as true
UserState.subscriber,
UserState.shared
];
// Use UseState as usual in your production code
import UserState from "@times-components/user-state";
<UserState state={/*...*/}>// ...</UserState>;
Storybook
The UserState
package also provides a addUserStateKnobs(defaultUserState)
method which will automatically add user state knobs for stories that
selectively renders based on the user state. You just need to ensure that
addUserStateKnobs
is called for every story.
import { addUserStateKnobs, USER_STATES } from "@times-components/user-state";
storiesOf(...)
.add(() => {
addUserStateKnobs(USER_STATES.SUBSCRIBER);
})
Contributing
Please read CONTRIBUTING.md before contributing to this package
Running the code
Please see our main README.md to get the project running locally
Development
The code can be formatted and linted in accordance with the agreed standards.
yarn fmt
yarn lint
Testing
Testing can be done on each platform individually
yarn test:web
Visit the official
Future
4 days ago
5 days ago
23 days ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
7 months ago
7 months ago
10 months ago
10 months ago
7 months ago
9 months ago
7 months ago
7 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago
5 years ago