How to use react-tweek - 3 common examples

To help you get started, we’ve selected a few react-tweek examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Soluto / tweek / services / editor / src / pages / keys / components / KeyPage / KeyPage.js View on Github external
revision: query.revision,
    detailsAdded: state.selectedKey && state.selectedKey.detailsAdded,
  };
};

const enhance = compose(
  connect(
    mapStateToProps,
    { ...selectedKeyActions, ...alertActions },
  ),
  routeLeaveHook(
    hasUnsavedChanges,
    'You have unsaved changes, are you sure you want to leave this page?',
    { className: 'key-page-wrapper' },
  ),
  withTweekValues({ historySince: '@tweek/editor/history/since' }, { defaultValues: {} }),
  lifecycle({
    componentDidMount() {
      const { configKey, selectedKey, openKey, revision, historySince } = this.props;
      if (!configKey) return;
      if (selectedKey && selectedKey.key === configKey) return;
      openKey(configKey, { revision, historySince });
    },
    componentWillReceiveProps({ configKey, revision, historySince }) {
      const { openKey } = this.props;
      if (
        configKey !== BLANK_KEY_NAME &&
        (configKey !== this.props.configKey || revision !== this.props.revision)
      ) {
        openKey(configKey, { revision, historySince });
      }
    },
github Soluto / tweek / services / editor / src / pages / keys / components / KeysList / KeysList.js View on Github external
<div>{name}</div>
        <div>
          {(tags || []).map((x) =&gt; (
            <span>{x}</span>
          ))}
        </div>
      
      <div>{key_path}</div>
      <div>{description}</div>
    
  
);

const enhance = compose(
  connect((state) =&gt; ({ selectedKey: state.selectedKey &amp;&amp; state.selectedKey.key })),
  withTweekValues(
    {
      supportMultiResultsView: '@tweek/editor/experimental/keys_search/enable_cards_view',
      maxSearchResults: '@tweek/editor/search/max_results',
      showInternalKeys: '@tweek/editor/show_internal_keys',
    },
    {
      defaultValues: {},
    },
  ),
  setDisplayName('KeysList'),
);

const KeysList = enhance(
  componentFromStream((prop$) =&gt; {
    const supportMultiResultsView$ = prop$.pluck('supportMultiResultsView').distinctUntilChanged();
github Soluto / tweek / services / editor / src / contexts / Tweek.js View on Github external
import React, { useEffect, useState } from 'react';
import { prepareKey, TweekProvider as OriginalTweekProvider } from 'react-tweek';
import { TweekRepository } from 'tweek-local-cache';
import { equals } from 'ramda';
import { tweekClient } from '../utils/tweekClients';
import { useCurrentUser } from './CurrentUser';

prepareKey('@tweek/editor/_');

const toTweekContext = ({ User }) => ({ tweek_editor_user: User });

export const TweekProvider = ({ children }) => {
  const [tweekRepository, setTweekRepository] = useState();

  const user = useCurrentUser();

  useEffect(() => {
    if (!user) {
      return;
    }

    const context = toTweekContext(user);

    if (tweekRepository) {

react-tweek

react bindings for tweek

MIT
Latest version published 3 years ago

Package Health Score

48 / 100
Full package analysis